From bb7c55c364b4ca82f31f2d7e26764a5498d60ca0 Mon Sep 17 00:00:00 2001 From: mhp23 Date: Sun, 12 Jan 2025 13:13:56 +0330 Subject: [PATCH] chore: removing the linear method and setting the recursive as the default --- USAGE.md | 14 +----- __tests__/mapping.test.ts | 31 +------------ package.json | 5 +-- src/hooks/useRStyle.ts | 9 ++-- src/layout/createRStyle/index.ts | 12 +++-- .../createRStyle/mapping/linearMapping.ts | 45 ------------------- src/types.ts | 8 ---- yarn.lock | 5 --- 8 files changed, 12 insertions(+), 117 deletions(-) delete mode 100644 src/layout/createRStyle/mapping/linearMapping.ts diff --git a/USAGE.md b/USAGE.md index 5d9e54e..26ec69c 100644 --- a/USAGE.md +++ b/USAGE.md @@ -117,14 +117,6 @@ createRStyle(styles, config); The config options includes: -

method

- -_Possible values_: `recursive` | `linear` - -_Default_: `recursive` - -To specify the parsing styles method, in this case, the recursive method is generally faster than the linear method (although the algorithm is not strictly linear, it has the potential for linear time complexity and is called linear). However, for deep and large structured objects, the linear algorithm may be more appropriate. -

width

To use custom dimensions width for the calculation @@ -156,11 +148,10 @@ const styles = createRStyle({ ## useRStyle -A hook is provided for [createRStyle](#createrstyle) to create a dynamic responsive scale. This hook generates a new style when there are changes in dimensions, the parsing method, type, or bases. It accepts tree arguments: +A hook is provided for [createRStyle](#createrstyle) to create a dynamic responsive scale. This hook generates a new style when there are changes in dimensions, the parsing method, type, or bases. It accepts two arguments: 1. The first argument is the style and is required (as an object or a function) 2. The second argument is the dependency list to regenerate styles after changing them, and default is an empty array -3. The third argument is the parsing method which is optional and the default is `recursive` An example: @@ -191,8 +182,7 @@ const ResponsiveBox: React.FC = () => { fontSize: `${SIZE}rs`, }, }, - [], - 'recursive' + [] ); return ( diff --git a/__tests__/mapping.test.ts b/__tests__/mapping.test.ts index a715986..25874ab 100644 --- a/__tests__/mapping.test.ts +++ b/__tests__/mapping.test.ts @@ -1,15 +1,8 @@ import { rh, rs, rw } from '../src'; -import { linearMapping } from '../src/layout/createRStyle/mapping/linearMapping'; import { recursiveMapping } from '../src/layout/createRStyle/mapping/recursiveMapping'; -describe('linear and recursive mapping tests', () => { +describe('recursive mapping tests', () => { it("should returns input value if it isn't an object or array", () => { - expect(linearMapping(undefined)).toEqual(undefined); - expect(linearMapping(null)).toEqual(null); - expect(linearMapping(123)).toEqual(123); - expect(linearMapping(true)).toEqual(true); - expect(linearMapping('style')).toEqual('style'); - //Recursive Mapping expect(recursiveMapping(undefined)).toEqual(undefined); expect(recursiveMapping(null)).toEqual(null); expect(recursiveMapping(123)).toEqual(123); @@ -18,22 +11,6 @@ describe('linear and recursive mapping tests', () => { }); it('should map empty object and nested objects correctly', () => { - expect(linearMapping({})).toEqual({}); - expect( - linearMapping({ - container: {}, - text: {}, - box: { - transoform: [], - }, - }) - ).toEqual({ - container: {}, - text: {}, - box: { - transoform: [], - }, - }); expect(recursiveMapping({})).toEqual({}); expect( recursiveMapping({ @@ -73,8 +50,6 @@ describe('linear and recursive mapping tests', () => { height: rh(10), }, }; - expect(linearMapping(input)).toEqual(expectedResult); - //Recursive Mapping expect(recursiveMapping(input)).toEqual(expectedResult); }); @@ -84,8 +59,6 @@ describe('linear and recursive mapping tests', () => { { box: { width: rs(10) } }, { box2: { width: rs(12.5) } }, ]; - expect(linearMapping(input)).toEqual(expectedResult); - //Recursive Mapping expect(recursiveMapping(input)).toEqual(expectedResult); }); @@ -136,8 +109,6 @@ describe('linear and recursive mapping tests', () => { }, }, }; - expect(linearMapping(input)).toEqual(expectedResult); - //Recursive Mapping expect(recursiveMapping(input)).toEqual(expectedResult); }); }); diff --git a/package.json b/package.json index b17132b..3b5d895 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,6 @@ "@react-native-community/eslint-config": "^3.0.2", "@release-it/conventional-changelog": "^5.0.0", "@types/jest": "^28.1.2", - "@types/lodash": "^4.14.202", "@types/react": "~17.0.21", "@types/react-native": "0.70.0", "commitlint": "^17.0.2", @@ -172,7 +171,5 @@ "typescript" ] }, - "dependencies": { - "lodash": "^4.17.21" - } + "dependencies": {} } diff --git a/src/hooks/useRStyle.ts b/src/hooks/useRStyle.ts index c4c9f39..d8875a4 100644 --- a/src/hooks/useRStyle.ts +++ b/src/hooks/useRStyle.ts @@ -2,31 +2,28 @@ import { type DependencyList, useMemo } from 'react'; import { useDevice } from './useDevice'; import { createRStyle } from '../layout'; import { useWindowDimensions } from 'react-native'; -import type { MethodType, NamedStyles } from '../types'; +import type { NamedStyles } from '../types'; /** * A hook is provided for createRStyle to create a dynamic responsive scale. This hook generates a new style when there are changes in dimensions, the parsing method, type, or bases. * @param styles * @param deps dependency list to regenerate styles after changing them, and default is an empty array - * @param method parsing method which is optional and the default is `recursive` * @returns a responsive styles `object` */ export const useRStyle = | NamedStyles>( styles: T | (() => T), - deps: DependencyList = [], - method: MethodType = 'recursive' + deps: DependencyList = [] ) => { const device = useDevice(); const { width, height } = useWindowDimensions(); - const dependencies = [width, height, method, device, ...deps]; + const dependencies = [width, height, device, ...deps]; const responsivedStyles = useMemo(() => { const passedStyles = typeof styles === 'function' ? styles() : styles; return createRStyle(passedStyles, { width, height, - method, scaleConfig: device, }); // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/src/layout/createRStyle/index.ts b/src/layout/createRStyle/index.ts index 1c9afb4..da6bd5a 100644 --- a/src/layout/createRStyle/index.ts +++ b/src/layout/createRStyle/index.ts @@ -1,5 +1,4 @@ import { StyleSheet } from 'react-native'; -import { linearMapping } from './mapping/linearMapping'; import { recursiveMapping } from './mapping/recursiveMapping'; import type { StyleType, NamedStyles, CreateStyleConfig } from '../../types'; /** @@ -27,10 +26,9 @@ export const createRStyle = | NamedStyles>( style: T, styleConfig?: Partial ): StyleType => { - const responsivedStyles = - styleConfig?.method === 'linear' - ? linearMapping(style, styleConfig) - : recursiveMapping(style, styleConfig); - //@ts-ignore - return StyleSheet.create(responsivedStyles); + const responsivedStyles = recursiveMapping( + style, + styleConfig + ) as StyleSheet.NamedStyles; + return StyleSheet.create(responsivedStyles) as StyleType; }; diff --git a/src/layout/createRStyle/mapping/linearMapping.ts b/src/layout/createRStyle/mapping/linearMapping.ts deleted file mode 100644 index 3f7074b..0000000 --- a/src/layout/createRStyle/mapping/linearMapping.ts +++ /dev/null @@ -1,45 +0,0 @@ -import _ from 'lodash'; -import type { - StyleStack, - ValuePattern, - CreateStyleConfig, -} from '../../../types'; -import { parseValue } from '../parseValue'; - -export const linearMapping = ( - style: T, - styleConfig?: Partial -) => { - const stack: StyleStack[] = [{ style, parentPath: '' }]; - while (stack.length > 0) { - const { style: currentStyle, parentPath } = stack.pop()!; - if (Array.isArray(currentStyle)) { - for (let i = 0; i < currentStyle.length; ++i) { - stack.push({ - style: currentStyle[i], - parentPath: `${parentPath}[${i}]`, - }); - } - } else if (typeof currentStyle === 'object' && currentStyle !== null) { - for (const [property, currentValue] of Object.entries(currentStyle)) { - if (typeof currentValue !== 'object' || currentValue === null) { - const parsedVal = parseValue( - currentValue as ValuePattern, - styleConfig - ); - style = _.set( - style as object, - `${parentPath}.${property}`, - parsedVal - ); - } else { - stack.push({ - style: currentValue, - parentPath: parentPath ? `${parentPath}.${property}` : property, - }); - } - } - } - } - return style; -}; diff --git a/src/types.ts b/src/types.ts index de49465..429f168 100644 --- a/src/types.ts +++ b/src/types.ts @@ -46,15 +46,7 @@ export type NamedStyles = { export type Pattern = 'rs' | 'rw' | 'rh'; export type ResponsivePattern = `${number}${Pattern}`; export type ValuePattern = string | number | ResponsivePattern; -export type MethodType = 'linear' | 'recursive'; export type CreateStyleConfig = { - /** - * To specify the parsing styles method, in this case, the recursive method is generally faster than the linear - * method (although the algorithm is not strictly linear, it has the potential for linear time complexity and - * is called linear). However, for deep and large structured objects, the linear algorithm may be more appropriate. - * @default recursive - */ - method: MethodType; /** * To use custom dimensions width for the calculation */ diff --git a/yarn.lock b/yarn.lock index 119eb78..da4408c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2668,11 +2668,6 @@ resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz" integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== -"@types/lodash@^4.14.202": - version "4.14.202" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8" - integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ== - "@types/minimist@^1.2.0", "@types/minimist@^1.2.2": version "1.2.2" resolved "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz"