diff --git a/index.d.ts b/index.d.ts index fbac3a0..d391a44 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,10 +1,11 @@ type BooleanProps = { - [P in keyof T]: T[P] extends boolean ? P : never + [P in keyof T]: T[P] extends boolean ? P : never; }[keyof T]; export function match(propName: keyof T, propValue: T[keyof T]); export function isNot(...propName: BooleanProps[]); export function isOr(...propName: BooleanProps[]); export function isSomeNot(...propName: BooleanProps[]); +export function get(propName: string); export default function is(...propName: BooleanProps[]); diff --git a/package.json b/package.json index 2429026..8acd5e7 100644 --- a/package.json +++ b/package.json @@ -88,5 +88,8 @@ "prettier --config .prettierrc --write", "git add" ] + }, + "dependencies": { + "lodash": "^4.x.x" } } diff --git a/readme.md b/readme.md index 18eb22b..89bf26d 100644 --- a/readme.md +++ b/readme.md @@ -52,7 +52,7 @@ ${match("size", "small")` ## Examples ```js -import is, { isNot, isOr, isSomeNot, match } from 'styled-is'; +import is, { isNot, isOr, isSomeNot, match, get } from 'styled-is'; import styled from 'styled-components'; const Div = styled.div` @@ -99,6 +99,10 @@ const Div = styled.div` background-color: green; ${props => (props.size === 'small' ? `width: 3rem;` : `width: 6rem;`)} `}; + + ${get('theme.primaryColor')}; + + ${get('colorPrimary')}; `; ``` diff --git a/src/index.js b/src/index.js index bab80ae..44222ab 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ // file, You can obtain one at http://mozilla.org/MPL/2.0/. import { css } from 'styled-components'; +import get from 'lodash/fp/get'; const styledIf = (method, condition) => (...names) => (...args) => props => { return ( @@ -19,7 +20,7 @@ const handleFunctions = (args, props) => { for (let i = 1; i < args.length; i++) { if (typeof args[i] === 'function') { const output = args[i](props); - if (typeof output === "string" && output.includes(':')) { + if (typeof output === 'string' && output.includes(':')) { css += output; } } @@ -43,4 +44,4 @@ const isSomeNot = styledIf('some', false); const match = styledIf('match'); export default is; -export { isNot, isOr, isSomeNot, match }; +export { isNot, isOr, isSomeNot, match, get }; diff --git a/test/index.js b/test/index.js index 670e770..fe4a1c7 100644 --- a/test/index.js +++ b/test/index.js @@ -2,7 +2,7 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at http://mozilla.org/MPL/2.0/. -const { default: is, isNot, isOr, isSomeNot, match } = require('../'); +const { default: is, isNot, isOr, isSomeNot, match, get } = require('../src'); const test = require('ava'); test('should render only if prop is truthy', t => { @@ -61,3 +61,13 @@ test('should render match is true', t => { t.deepEqual(rule({ test: 'one' }), false); t.deepEqual(rule({ test: 'lol' }), ['hello']); }); + +test('should render picked property', t => { + t.deepEqual(get('sample')({ sample: 'ok' }), 'ok'); + t.deepEqual( + get('sample.level.sublevel')({ + sample: { level: { sublevel: 'all good' } } + }), + 'all good' + ); +}); diff --git a/yarn.lock b/yarn.lock index 7393e07..b3b6746 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3829,6 +3829,11 @@ lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17 resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== +lodash@^4.17.20: + version "4.17.20" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" + integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== + log-symbols@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"