From 6282464770af30010d6c928f07cebf77775a1aac Mon Sep 17 00:00:00 2001 From: Dan Radenkovic Date: Sat, 3 Oct 2020 10:29:46 +0200 Subject: [PATCH 1/3] Get Single prop from props --- index.d.ts | 2 +- readme.md | 4 ++++ src/index.js | 12 ++++++++++-- test/index.js | 19 ++++++++++++++++++- 4 files changed, 33 insertions(+), 4 deletions(-) diff --git a/index.d.ts b/index.d.ts index fbac3a0..225e65c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,5 +1,5 @@ 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]); diff --git a/readme.md b/readme.md index 18eb22b..2afb01a 100644 --- a/readme.md +++ b/readme.md @@ -99,6 +99,10 @@ const Div = styled.div` background-color: green; ${props => (props.size === 'small' ? `width: 3rem;` : `width: 6rem;`)} `}; + + ${getProp('theme.primaryColor')}; + + ${getProp('colorPrimary')}; `; ``` diff --git a/src/index.js b/src/index.js index bab80ae..4e5fe13 100644 --- a/src/index.js +++ b/src/index.js @@ -19,7 +19,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; } } @@ -36,6 +36,14 @@ const handleFunctions = (args, props) => { return args; }; +const getProp = path => props => { + for (let i = 0, target = path.split('.'), len = target.length; i < len; i++) { + props = props[target[i]]; + } + + return props; +}; + const is = styledIf('every', true); const isNot = styledIf('every', false); const isOr = styledIf('some', true); @@ -43,4 +51,4 @@ const isSomeNot = styledIf('some', false); const match = styledIf('match'); export default is; -export { isNot, isOr, isSomeNot, match }; +export { isNot, isOr, isSomeNot, match, getProp }; diff --git a/test/index.js b/test/index.js index 670e770..2552660 100644 --- a/test/index.js +++ b/test/index.js @@ -2,7 +2,14 @@ // 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, + getProp +} = require('../src'); const test = require('ava'); test('should render only if prop is truthy', t => { @@ -61,3 +68,13 @@ test('should render match is true', t => { t.deepEqual(rule({ test: 'one' }), false); t.deepEqual(rule({ test: 'lol' }), ['hello']); }); + +test.only('should render picked property', t => { + t.deepEqual(getProp('sample')({ sample: 'ok' }), 'ok'); + t.deepEqual( + getProp('sample.level.sublevel')({ + sample: { level: { sublevel: 'all good' } } + }), + 'all good' + ); +}); From 93efed4b1bb44d3df775e2e5e0ea9750a1fabf80 Mon Sep 17 00:00:00 2001 From: Dan Radenkovic Date: Mon, 5 Oct 2020 11:00:16 +0200 Subject: [PATCH 2/3] use lodash fp/get and rename property to get --- package.json | 3 +++ readme.md | 6 +++--- src/index.js | 11 ++--------- test/index.js | 15 ++++----------- yarn.lock | 5 +++++ 5 files changed, 17 insertions(+), 23 deletions(-) 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 2afb01a..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` @@ -100,9 +100,9 @@ const Div = styled.div` ${props => (props.size === 'small' ? `width: 3rem;` : `width: 6rem;`)} `}; - ${getProp('theme.primaryColor')}; + ${get('theme.primaryColor')}; - ${getProp('colorPrimary')}; + ${get('colorPrimary')}; `; ``` diff --git a/src/index.js b/src/index.js index 4e5fe13..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 ( @@ -36,14 +37,6 @@ const handleFunctions = (args, props) => { return args; }; -const getProp = path => props => { - for (let i = 0, target = path.split('.'), len = target.length; i < len; i++) { - props = props[target[i]]; - } - - return props; -}; - const is = styledIf('every', true); const isNot = styledIf('every', false); const isOr = styledIf('some', true); @@ -51,4 +44,4 @@ const isSomeNot = styledIf('some', false); const match = styledIf('match'); export default is; -export { isNot, isOr, isSomeNot, match, getProp }; +export { isNot, isOr, isSomeNot, match, get }; diff --git a/test/index.js b/test/index.js index 2552660..fe4a1c7 100644 --- a/test/index.js +++ b/test/index.js @@ -2,14 +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, - getProp -} = require('../src'); +const { default: is, isNot, isOr, isSomeNot, match, get } = require('../src'); const test = require('ava'); test('should render only if prop is truthy', t => { @@ -69,10 +62,10 @@ test('should render match is true', t => { t.deepEqual(rule({ test: 'lol' }), ['hello']); }); -test.only('should render picked property', t => { - t.deepEqual(getProp('sample')({ sample: 'ok' }), 'ok'); +test('should render picked property', t => { + t.deepEqual(get('sample')({ sample: 'ok' }), 'ok'); t.deepEqual( - getProp('sample.level.sublevel')({ + 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" From 48bd796da0ee6bde71bc1fa69202720b1cdc6e61 Mon Sep 17 00:00:00 2001 From: Dan Radenkovic Date: Mon, 5 Oct 2020 11:03:19 +0200 Subject: [PATCH 3/3] update typescript definition --- index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/index.d.ts b/index.d.ts index 225e65c..d391a44 100644 --- a/index.d.ts +++ b/index.d.ts @@ -6,5 +6,6 @@ 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[]);