@namelessdev/flow
Advanced tools
@@ -1,7 +0,7 @@ | ||
| import React from 'react'; | ||
| import React, { ReactNode } from 'react'; | ||
| type DeferredProps = { | ||
| timeout: number; | ||
| children: JSX.Element; | ||
| placeholder?: JSX.Element; | ||
| children: ReactNode; | ||
| placeholder?: ReactNode; | ||
| }; | ||
@@ -8,0 +8,0 @@ declare const Deferred: React.FC<DeferredProps>; |
@@ -1,7 +0,7 @@ | ||
| import React from 'react'; | ||
| import React, { ReactNode } from 'react'; | ||
| type DeferredProps = { | ||
| timeout: number; | ||
| children: JSX.Element; | ||
| placeholder?: JSX.Element; | ||
| children: ReactNode; | ||
| placeholder?: ReactNode; | ||
| }; | ||
@@ -8,0 +8,0 @@ declare const Deferred: React.FC<DeferredProps>; |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/Deferred.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,UAAU,WAAW,mBAAmB;AAQjD,MAAM,WAAoC,MAAM;AAAA,EACrD,CAAC,EAAE,SAAS,UAAU,YAAY,MAAM;AACtC,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,UAAM,mBAAmB,YAAY,MAAM;AACzC,iBAAW,IAAI;AAAA,IACjB,GAAG,CAAC,CAAC;AAEL,cAAU,MAAM;AACd,YAAM,QAAQ,WAAW,kBAAkB,OAAO;AAClD,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC,GAAG,CAAC,SAAS,gBAAgB,CAAC;AAE9B,WAAO,UAAU,WAAW,eAAe;AAAA,EAC7C;AACF;AAEA,IAAO,mBAAQ","sourcesContent":["\"use client\";\nimport React, { useState, useEffect, useCallback } from \"react\";\n\ntype DeferredProps = {\n timeout: number;\n children: JSX.Element;\n placeholder?: JSX.Element;\n};\n\nexport const Deferred: React.FC<DeferredProps> = React.memo(\n ({ timeout, children, placeholder }) => {\n const [isShown, setIsShown] = useState(false);\n\n const handleSetIsShown = useCallback(() => {\n setIsShown(true);\n }, []);\n\n useEffect(() => {\n const timer = setTimeout(handleSetIsShown, timeout);\n return () => clearTimeout(timer);\n }, [timeout, handleSetIsShown]);\n\n return isShown ? children : placeholder || null;\n },\n);\n\nexport default Deferred;\n"]} | ||
| {"version":3,"sources":["../src/Deferred.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,UAAU,WAAW,mBAA8B;AAQ5D,MAAM,WAAoC,MAAM;AAAA,EACrD,CAAC,EAAE,SAAS,UAAU,YAAY,MAAM;AACtC,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,UAAM,mBAAmB,YAAY,MAAM;AACzC,iBAAW,IAAI;AAAA,IACjB,GAAG,CAAC,CAAC;AAEL,cAAU,MAAM;AACd,YAAM,QAAQ,WAAW,kBAAkB,OAAO;AAClD,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC,GAAG,CAAC,SAAS,gBAAgB,CAAC;AAE9B,WAAO,UAAU,WAAW,eAAe;AAAA,EAC7C;AACF;AAEA,IAAO,mBAAQ","sourcesContent":["\"use client\";\nimport React, { useState, useEffect, useCallback, ReactNode } from \"react\";\n\ntype DeferredProps = {\n timeout: number;\n children: ReactNode;\n placeholder?: ReactNode;\n};\n\nexport const Deferred: React.FC<DeferredProps> = React.memo(\n ({ timeout, children, placeholder }) => {\n const [isShown, setIsShown] = useState(false);\n\n const handleSetIsShown = useCallback(() => {\n setIsShown(true);\n }, []);\n\n useEffect(() => {\n const timer = setTimeout(handleSetIsShown, timeout);\n return () => clearTimeout(timer);\n }, [timeout, handleSetIsShown]);\n\n return isShown ? children : placeholder || null;\n },\n);\n\nexport default Deferred;\n"]} |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../../src/Deferred.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,UAAU,WAAW,mBAAmB;AAQjD,MAAM,WAAoC,MAAM;AAAA,EACrD,CAAC,EAAE,SAAS,UAAU,YAAY,MAAM;AACtC,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,UAAM,mBAAmB,YAAY,MAAM;AACzC,iBAAW,IAAI;AAAA,IACjB,GAAG,CAAC,CAAC;AAEL,cAAU,MAAM;AACd,YAAM,QAAQ,WAAW,kBAAkB,OAAO;AAClD,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC,GAAG,CAAC,SAAS,gBAAgB,CAAC;AAE9B,WAAO,UAAU,WAAW,eAAe;AAAA,EAC7C;AACF;AAEA,IAAO,mBAAQ","sourcesContent":["\"use client\";\nimport React, { useState, useEffect, useCallback } from \"react\";\n\ntype DeferredProps = {\n timeout: number;\n children: JSX.Element;\n placeholder?: JSX.Element;\n};\n\nexport const Deferred: React.FC<DeferredProps> = React.memo(\n ({ timeout, children, placeholder }) => {\n const [isShown, setIsShown] = useState(false);\n\n const handleSetIsShown = useCallback(() => {\n setIsShown(true);\n }, []);\n\n useEffect(() => {\n const timer = setTimeout(handleSetIsShown, timeout);\n return () => clearTimeout(timer);\n }, [timeout, handleSetIsShown]);\n\n return isShown ? children : placeholder || null;\n },\n);\n\nexport default Deferred;\n"]} | ||
| {"version":3,"sources":["../../src/Deferred.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,UAAU,WAAW,mBAA8B;AAQ5D,MAAM,WAAoC,MAAM;AAAA,EACrD,CAAC,EAAE,SAAS,UAAU,YAAY,MAAM;AACtC,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,UAAM,mBAAmB,YAAY,MAAM;AACzC,iBAAW,IAAI;AAAA,IACjB,GAAG,CAAC,CAAC;AAEL,cAAU,MAAM;AACd,YAAM,QAAQ,WAAW,kBAAkB,OAAO;AAClD,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC,GAAG,CAAC,SAAS,gBAAgB,CAAC;AAE9B,WAAO,UAAU,WAAW,eAAe;AAAA,EAC7C;AACF;AAEA,IAAO,mBAAQ","sourcesContent":["\"use client\";\nimport React, { useState, useEffect, useCallback, ReactNode } from \"react\";\n\ntype DeferredProps = {\n timeout: number;\n children: ReactNode;\n placeholder?: ReactNode;\n};\n\nexport const Deferred: React.FC<DeferredProps> = React.memo(\n ({ timeout, children, placeholder }) => {\n const [isShown, setIsShown] = useState(false);\n\n const handleSetIsShown = useCallback(() => {\n setIsShown(true);\n }, []);\n\n useEffect(() => {\n const timer = setTimeout(handleSetIsShown, timeout);\n return () => clearTimeout(timer);\n }, [timeout, handleSetIsShown]);\n\n return isShown ? children : placeholder || null;\n },\n);\n\nexport default Deferred;\n"]} |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../../src/If.tsx"],"names":["True","False"],"mappings":"AAAA,OAAO,WAAiC;AACxC,SAAS,eAAe;AACxB,SAAS,SAAe,YAAY;AAO7B,MAAM,KAAiB,CAAC,EAAE,MAAM,SAAS,MAAM;AACpD,QAAM,EAAE,MAAAA,OAAM,OAAAC,OAAM,IAAI,QAAQ,UAAU,QAAQ,OAAO;AAGzD,SAAO,QAAQ,KAAK,MAAM,oCAACD,OAAA,IAAK,GAAI,oCAACC,QAAA,IAAM,CAAE;AAC/C;AAEO,MAAM,OAAO,KAAK,MAAM;AACxB,MAAM,QAAQ,KAAK,OAAO","sourcesContent":["import React, { FC, ReactElement } from \"react\";\nimport { Logical } from \"@namelessdev/helper\";\nimport { retrive, Slot, slot } from \"@namelessdev/slots\";\n\ntype IFComonent = FC<{\n when: boolean;\n children: ReactElement | ReactElement[];\n}>\n\nexport const If: IFComonent = ({ when, children }) => {\n const { True, False } = retrive(children, \"true\", \"false\");\n // console.log(children, <True />);\n \n return Logical.when(when, <True />, <False />);\n};\n\nexport const True = slot(\"true\");\nexport const False = slot(\"false\")\n"]} | ||
| {"version":3,"sources":["../../src/If.tsx"],"names":["True","False"],"mappings":"AAAA,OAAO,WAAiC;AACxC,SAAS,eAAe;AACxB,SAAS,SAAe,YAAY;AAO7B,MAAM,KAAkB,CAAC,EAAE,MAAM,SAAS,MAAM;AACrD,QAAM,EAAE,MAAAA,OAAM,OAAAC,OAAM,IAAI,QAAQ,UAAU,QAAQ,OAAO;AAEzD,SAAO,QAAQ,KAAK,MAAM,oCAACD,OAAA,IAAK,GAAI,oCAACC,QAAA,IAAM,CAAE;AAC/C;AAGO,MAAM,OAAqB,KAAK,MAAM;AAEtC,MAAM,QAAsB,KAAK,OAAO","sourcesContent":["import React, { FC, ReactElement } from \"react\";\nimport { Logical } from \"@namelessdev/helper\";\nimport { retrive, Slot, slot } from \"@namelessdev/slots\";\n\ntype IfProps = {\n when: boolean;\n children: ReactElement | ReactElement[];\n};\n\nexport const If: FC<IfProps> = ({ when, children }) => {\n const { True, False } = retrive(children, \"true\", \"false\");\n\n return Logical.when(when, <True />, <False />);\n};\n\n// @ts-ignore\nexport const True: Slot<\"true\"> = slot(\"true\");\n// @ts-ignore\nexport const False: Slot<\"true\"> = slot(\"false\");\n"]} |
@@ -1,1 +0,1 @@ | ||
| export{Show}from"./Show";export{False,If,True}from"./If";export{Switch}from"./Switch";export{Match}from"./Match";export{For}from"./For";export{Repeat}from"./Repeat";export{Dynamic}from"./Dynamic";export{overriding}from"./overriding";//# sourceMappingURL=index.js.map | ||
| export{Show}from"./Show";export{False,If,True}from"./If";export{Match,Switch}from"./Switch";export{For}from"./For";export{Repeat}from"./Repeat";export{Dynamic}from"./Dynamic";//# sourceMappingURL=index.js.map |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,SAAS,YAAY;AACrB,SAAS,IAAI,MAAM,aAAa;AAChC,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,WAAW;AACpB,SAAS,cAAc;AAEvB,SAAS,eAAe;AACxB,SAAS,kBAAkB","sourcesContent":["export { Show } from \"./Show\";\nexport { If, True, False } from \"./If\";\nexport { Switch } from \"./Switch\";\nexport { Match } from \"./Match\";\nexport { For } from \"./For\";\nexport { Repeat } from \"./Repeat\";\n// export { Deferred } from \"./Deferred\";\nexport { Dynamic } from \"./Dynamic\";\nexport { overriding } from \"./overriding\";\n"]} | ||
| {"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,SAAS,YAAY;AACrB,SAAS,IAAI,MAAM,aAAa;AAChC,SAAS,QAAQ,aAAa;AAE9B,SAAS,WAAW;AACpB,SAAS,cAAc;AAEvB,SAAS,eAAe","sourcesContent":["export { Show } from \"./Show\";\nexport { If, True, False } from \"./If\";\nexport { Switch, Match } from \"./Switch\";\n// export { Match } from \"./Match\";\nexport { For } from \"./For\";\nexport { Repeat } from \"./Repeat\";\n// export { Deferred } from \"./Deferred\";\nexport { Dynamic } from \"./Dynamic\";\n"]} |
@@ -1,1 +0,1 @@ | ||
| import t,{memo as e}from"react";const n=e((({count:e,children:n,empty:r})=>{const o=r=>{if(r>=e)return null;const c="function"==typeof n?n(r):n;return t.createElement(t.Fragment,{key:r},c,o(r+1))};return t.createElement(t.Fragment,null,0===e?"function"==typeof r?r():r:o(0))}));export{n as Repeat};//# sourceMappingURL=Repeat.js.map | ||
| import r,{memo as t}from"react";import{For as e}from"./For";const m=t((({count:t,children:m,empty:o})=>r.createElement(e,{items:Array.from({length:t}).map(((r,t)=>t)),empty:o},m)));export{m as Repeat};//# sourceMappingURL=Repeat.js.map |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../../src/Repeat.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAkC,YAAY;AA2B9C,MAAM,SAAgC;AAAA,EAC3C,CAAC,EAAE,OAAO,UAAU,MAAM,MAAM;AAC9B,UAAM,iBAAiB,CAAC,UAA6B;AACnD,UAAI,SAAS;AAAO,eAAO;AAC3B,YAAM,UACJ,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;AACrD,aACE,oCAAC,MAAM,UAAN,EAAe,KAAK,SAClB,SACA,eAAe,QAAQ,CAAC,CAC3B;AAAA,IAEJ;AAEA,WACE,0DACG,UAAU,IACP,OAAO,UAAU,aACf,MAAM,IACN,QACF,eAAe,CAAC,CACtB;AAAA,EAEJ;AACF","sourcesContent":["import React, { ReactNode, ReactElement, memo } from \"react\";\n\ntype RepeatProps = {\n count: number;\n children: ReactNode | ((index: number) => ReactNode);\n empty?: ReactNode | (() => ReactNode);\n};\n\n/**\n * Компонент Repeat для повторения дочерних элементов.\n *\n * @param {RepeatProps} props - Параметры компонента.\n * @param {number} props.count - Количество повторений.\n * @param {ReactNode | ((index: number) => ReactNode)} props.children - Дочерние элементы или функция для их рендера.\n * @param {ReactNode | (() => ReactNode)} [props.empty] - Элемент, отображаемый при отсутствии дочерних элементов.\n *\n * @returns {React.ReactElement} React-компонент.\n *\n * @example\n * <Repeat count={5}>\n * {(index) => <p>Элемент {index}</p>}\n * </Repeat>\n *\n * @example\n * <Repeat count={0} empty={<p>Нет элементов</p>}/>\n *\n */\nexport const Repeat: React.FC<RepeatProps> = memo(\n ({ count, children, empty }) => {\n const renderChildren = (index: number): ReactNode => {\n if (index >= count) return null;\n const element =\n typeof children === \"function\" ? children(index) : children;\n return (\n <React.Fragment key={index}>\n {element}\n {renderChildren(index + 1)}\n </React.Fragment>\n );\n };\n\n return (\n <>\n {count === 0\n ? typeof empty === \"function\"\n ? empty()\n : empty\n : renderChildren(0)}\n </>\n );\n },\n);\n"]} | ||
| {"version":3,"sources":["../../src/Repeat.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAkC,YAA4B;AACrE,SAAS,WAAW;AAQb,MAAM,SAAgC;AAAA,EAC3C,CAAC,EAAE,OAAO,UAAU,MAAM,MACxB,oCAAC,OAAI,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,SACzD,QACH;AAEJ","sourcesContent":["import React, { ReactNode, ReactElement, memo, isValidElement } from \"react\";\nimport { For } from \"./For\";\n\ntype RepeatProps = {\n count: number;\n children: (item: number, index: number) => ReactNode;\n empty?: ReactNode | (() => ReactNode);\n};\n\nexport const Repeat: React.FC<RepeatProps> = memo(\n ({ count, children, empty }) => (\n <For items={Array.from({ length: count }).map((_, i) => i)} empty={empty}>\n {children}\n </For>\n ),\n);\n"]} |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../../src/Show.tsx"],"names":[],"mappings":"AAAA,SAAS,eAAe;AAgBjB,MAAM,OAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEJ,SAAO,QAAQ,KAAK,MAAM,UAAU,YAAY,IAAI;AAwBtD","sourcesContent":["import { Logical } from \"@namelessdev/helper\";\nimport React, {\n FC,\n Fragment,\n ReactElement,\n cloneElement,\n createElement,\n isValidElement,\n} from \"react\";\n\ntype ShowProps = {\n when: boolean;\n fallback?: React.ReactNode;\n children: React.ReactNode;\n};\n\nexport const Show: FC<ShowProps> = ({\n when,\n fallback,\n children,\n}) => {\n // return when ? children : fallback || null;\n return Logical.when(when, children, fallback || null)\n // const Comp = when ? children : fallback || null;\n // if (!slot) return Comp;\n //\n // const cloneComp = (component: ReactElement) =>\n // cloneElement(\n // component,\n // Object.assign({}, component.props, { slot, ...props }),\n // component.props.children,\n // );\n //\n // if (Array.isArray(Comp))\n // return createElement(\n // Fragment,\n // {},\n // Comp.map((elem) => {\n // if (!isValidElement(elem)) return elem;\n // return cloneComp(elem);\n // }),\n // );\n // else {\n // if (!isValidElement(Comp)) return <slot name={slot}> {Comp} </slot>;\n // return cloneComp(Comp);\n // }\n};\n"]} | ||
| {"version":3,"sources":["../../src/Show.tsx"],"names":[],"mappings":"AAAA,SAAS,eAAe;AASjB,MAAM,OAAsB,CAAC,EAAE,MAAM,UAAU,SAAS,MAAM;AACnE,SAAO,QAAQ,KAAK,MAAM,UAAU,YAAY,IAAI;AACtD","sourcesContent":["import { Logical } from \"@namelessdev/helper\";\nimport { FC, ReactNode } from \"react\";\n\ntype ShowProps = {\n when: boolean;\n fallback?: ReactNode;\n children: ReactNode;\n};\n\nexport const Show: FC<ShowProps> = ({ when, fallback, children }) => {\n return Logical.when(when, children, fallback || null);\n};\n"]} |
@@ -1,1 +0,1 @@ | ||
| import e from"react";import{Match as r}from"./Match";import{Logical as t}from"@namelessdev/helper";const n=({children:n,fallback:l})=>{const o=e.Children.toArray(n).find((n=>t.and(e.isValidElement(n),n.type===r,n.props.when)));return e.createElement(e.Fragment,null,o||l)};export{n as Switch};//# sourceMappingURL=Switch.js.map | ||
| import e from"react";import{wrap as t,retrive as r}from"@namelessdev/slots";const l=({children:t,fallback:l})=>{const{Match:n}=r(t,{name:"match",filter:t=>e.isValidElement(t)&&t.props.when});return e.createElement(n,null,l)},n=t("match",(({children:e})=>e));export{n as Match,l as Switch};//# sourceMappingURL=Switch.js.map |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../../src/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,WAA6B;AACpC,SAAS,aAAa;AACtB,SAAS,eAAe;AAsBjB,MAAM,SAAgC,CAAC,EAAE,UAAU,SAAS,MAAM;AACvE,QAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAC7C,CAAC,UACC,QAAQ;AAAA,MACN,MAAM,eAAe,KAAK;AAAA,MACzB,MAAuB,SAAS;AAAA,MAChC,MAAuB,MAAM;AAAA,IAChC;AAAA,EACJ;AAEA,SAAO,0DAAG,SAAS,QAAS;AAC9B","sourcesContent":["import React, { ReactElement } from \"react\";\nimport { Match } from \"./Match\";\nimport { Logical } from \"@namelessdev/helper\";\n\ninterface SwitchProps {\n children: ReactElement | ReactElement[];\n fallback: ReactElement;\n}\n/**\n * Компонент `Switch` работает аналогично оператору switch в JavaScript.\n * Он принимает произвольное количество дочерних компонентов `Match` и возвращает первый `Match`, чье свойство `when` равно `true`.\n * Если такого `Match` нет, возвращается компонент, указанный в свойстве `fallback`.\n *\n * @param {ReactElement | ReactElement[]} children - Дочерние элементы, которые могут включать один или несколько компонентов `Match`.\n * @param {ReactElement} fallback - Элемент, который будет отображен, если ни один из дочерних компонентов `Match` не соответствует условию.\n * @returns {ReactElement} Возвращает первый подходящий `Match` или `fallback` элемент.\n *\n * @example\n * <Switch fallback={<DefaultComponent />}>\n * <Match when={condition1}><Component1 /></Match>\n * <Match when={condition2}><Component2 /></Match>\n * ...\n * </Switch>\n */\nexport const Switch: React.FC<SwitchProps> = ({ children, fallback }) => {\n const match = React.Children.toArray(children).find(\n (child: React.ReactNode) =>\n Logical.and(\n React.isValidElement(child),\n (child as ReactElement).type === Match,\n (child as ReactElement).props.when,\n ),\n ) as ReactElement | undefined;\n\n return <>{match || fallback}</>;\n};\n"]} | ||
| {"version":3,"sources":["../../src/Switch.tsx"],"names":["Match"],"mappings":"AAAA,OAAO,WAA4C;AACnD,SAAS,SAAS,YAAY;AAOvB,MAAM,SAAgC,CAAC,EAAE,UAAU,SAAS,MAAM;AACvE,QAAM,EAAE,OAAAA,OAAM,IAAI,QAAQ,UAAU;AAAA,IAClC,MAAM;AAAA,IACN,QAAQ,CAAC,UACP,MAAM,eAAe,KAAK,KAAM,MAAuB,MAAM;AAAA,EACjE,CAAC;AACD,SAAO,oCAACA,QAAA,MAAO,QAAS;AAC1B;AAOO,MAAM,QAAwB,KAAK,SAAS,CAAC,EAAE,SAAS,MAAM,QAAQ","sourcesContent":["import React, { FC, ReactElement, ReactNode } from \"react\";\nimport { retrive, wrap } from \"@namelessdev/slots\";\n\ninterface SwitchProps {\n children: ReactElement | ReactElement[];\n fallback: ReactElement;\n}\n\nexport const Switch: React.FC<SwitchProps> = ({ children, fallback }) => {\n const { Match } = retrive(children, {\n name: \"match\",\n filter: (child) =>\n React.isValidElement(child) && (child as ReactElement).props.when,\n });\n return <Match>{fallback}</Match>;\n};\n\ninterface MatchProps {\n when: boolean;\n children: ReactNode;\n}\n\nexport const Match: FC<MatchProps> = wrap(\"match\", ({ children }) => children);\n"]} |
+6
-13
@@ -1,19 +0,12 @@ | ||
| import React, { FC, ReactElement } from 'react'; | ||
| import { FC, ReactElement } from 'react'; | ||
| import { Slot } from '@namelessdev/slots'; | ||
| type IFComonent = FC<{ | ||
| type IfProps = { | ||
| when: boolean; | ||
| children: ReactElement | ReactElement[]; | ||
| }>; | ||
| declare const If: IFComonent; | ||
| declare const True: React.FC<{ | ||
| children: React.ReactNode; | ||
| }> & { | ||
| slot: "true"; | ||
| }; | ||
| declare const False: React.FC<{ | ||
| children: React.ReactNode; | ||
| }> & { | ||
| slot: "false"; | ||
| }; | ||
| declare const If: FC<IfProps>; | ||
| declare const True: Slot<"true">; | ||
| declare const False: Slot<"true">; | ||
| export { False, If, True }; |
+6
-13
@@ -1,19 +0,12 @@ | ||
| import React, { FC, ReactElement } from 'react'; | ||
| import { FC, ReactElement } from 'react'; | ||
| import { Slot } from '@namelessdev/slots'; | ||
| type IFComonent = FC<{ | ||
| type IfProps = { | ||
| when: boolean; | ||
| children: ReactElement | ReactElement[]; | ||
| }>; | ||
| declare const If: IFComonent; | ||
| declare const True: React.FC<{ | ||
| children: React.ReactNode; | ||
| }> & { | ||
| slot: "true"; | ||
| }; | ||
| declare const False: React.FC<{ | ||
| children: React.ReactNode; | ||
| }> & { | ||
| slot: "false"; | ||
| }; | ||
| declare const If: FC<IfProps>; | ||
| declare const True: Slot<"true">; | ||
| declare const False: Slot<"true">; | ||
| export { False, If, True }; |
+1
-1
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/If.tsx"],"names":["True","False"],"mappings":"AAAA,OAAO,WAAiC;AACxC,SAAS,eAAe;AACxB,SAAS,SAAe,YAAY;AAO7B,MAAM,KAAiB,CAAC,EAAE,MAAM,SAAS,MAAM;AACpD,QAAM,EAAE,MAAAA,OAAM,OAAAC,OAAM,IAAI,QAAQ,UAAU,QAAQ,OAAO;AAGzD,SAAO,QAAQ,KAAK,MAAM,oCAACD,OAAA,IAAK,GAAI,oCAACC,QAAA,IAAM,CAAE;AAC/C;AAEO,MAAM,OAAO,KAAK,MAAM;AACxB,MAAM,QAAQ,KAAK,OAAO","sourcesContent":["import React, { FC, ReactElement } from \"react\";\nimport { Logical } from \"@namelessdev/helper\";\nimport { retrive, Slot, slot } from \"@namelessdev/slots\";\n\ntype IFComonent = FC<{\n when: boolean;\n children: ReactElement | ReactElement[];\n}>\n\nexport const If: IFComonent = ({ when, children }) => {\n const { True, False } = retrive(children, \"true\", \"false\");\n // console.log(children, <True />);\n \n return Logical.when(when, <True />, <False />);\n};\n\nexport const True = slot(\"true\");\nexport const False = slot(\"false\")\n"]} | ||
| {"version":3,"sources":["../src/If.tsx"],"names":["True","False"],"mappings":"AAAA,OAAO,WAAiC;AACxC,SAAS,eAAe;AACxB,SAAS,SAAe,YAAY;AAO7B,MAAM,KAAkB,CAAC,EAAE,MAAM,SAAS,MAAM;AACrD,QAAM,EAAE,MAAAA,OAAM,OAAAC,OAAM,IAAI,QAAQ,UAAU,QAAQ,OAAO;AAEzD,SAAO,QAAQ,KAAK,MAAM,oCAACD,OAAA,IAAK,GAAI,oCAACC,QAAA,IAAM,CAAE;AAC/C;AAGO,MAAM,OAAqB,KAAK,MAAM;AAEtC,MAAM,QAAsB,KAAK,OAAO","sourcesContent":["import React, { FC, ReactElement } from \"react\";\nimport { Logical } from \"@namelessdev/helper\";\nimport { retrive, Slot, slot } from \"@namelessdev/slots\";\n\ntype IfProps = {\n when: boolean;\n children: ReactElement | ReactElement[];\n};\n\nexport const If: FC<IfProps> = ({ when, children }) => {\n const { True, False } = retrive(children, \"true\", \"false\");\n\n return Logical.when(when, <True />, <False />);\n};\n\n// @ts-ignore\nexport const True: Slot<\"true\"> = slot(\"true\");\n// @ts-ignore\nexport const False: Slot<\"true\"> = slot(\"false\");\n"]} |
| export { Show } from './Show.mjs'; | ||
| export { False, If, True } from './If.mjs'; | ||
| export { Switch } from './Switch.mjs'; | ||
| export { Match } from './Match.mjs'; | ||
| export { Match, Switch } from './Switch.mjs'; | ||
| export { For } from './For.mjs'; | ||
| export { Repeat } from './Repeat.mjs'; | ||
| export { Dynamic } from './Dynamic.mjs'; | ||
| export { overriding } from './overriding.mjs'; | ||
| import 'react'; | ||
| import '@namelessdev/helper'; | ||
| import '@namelessdev/slots'; |
+2
-4
| export { Show } from './Show.js'; | ||
| export { False, If, True } from './If.js'; | ||
| export { Switch } from './Switch.js'; | ||
| export { Match } from './Match.js'; | ||
| export { Match, Switch } from './Switch.js'; | ||
| export { For } from './For.js'; | ||
| export { Repeat } from './Repeat.js'; | ||
| export { Dynamic } from './Dynamic.js'; | ||
| export { overriding } from './overriding.js'; | ||
| import 'react'; | ||
| import '@namelessdev/helper'; | ||
| import '@namelessdev/slots'; |
+1
-1
@@ -1,1 +0,1 @@ | ||
| "use strict";var e=require("./Show"),r=require("./If"),t=require("./Switch"),n=require("./Match"),i=require("./For"),u=require("./Repeat"),o=require("./Dynamic"),c=require("./overriding");Object.defineProperty(exports,"Show",{enumerable:!0,get:function(){return e.Show}}),Object.defineProperty(exports,"False",{enumerable:!0,get:function(){return r.False}}),Object.defineProperty(exports,"If",{enumerable:!0,get:function(){return r.If}}),Object.defineProperty(exports,"True",{enumerable:!0,get:function(){return r.True}}),Object.defineProperty(exports,"Switch",{enumerable:!0,get:function(){return t.Switch}}),Object.defineProperty(exports,"Match",{enumerable:!0,get:function(){return n.Match}}),Object.defineProperty(exports,"For",{enumerable:!0,get:function(){return i.For}}),Object.defineProperty(exports,"Repeat",{enumerable:!0,get:function(){return u.Repeat}}),Object.defineProperty(exports,"Dynamic",{enumerable:!0,get:function(){return o.Dynamic}}),Object.defineProperty(exports,"overriding",{enumerable:!0,get:function(){return c.overriding}});//# sourceMappingURL=index.js.map | ||
| "use strict";var e=require("./Show"),r=require("./If"),t=require("./Switch"),n=require("./For"),u=require("./Repeat"),o=require("./Dynamic");Object.defineProperty(exports,"Show",{enumerable:!0,get:function(){return e.Show}}),Object.defineProperty(exports,"False",{enumerable:!0,get:function(){return r.False}}),Object.defineProperty(exports,"If",{enumerable:!0,get:function(){return r.If}}),Object.defineProperty(exports,"True",{enumerable:!0,get:function(){return r.True}}),Object.defineProperty(exports,"Match",{enumerable:!0,get:function(){return t.Match}}),Object.defineProperty(exports,"Switch",{enumerable:!0,get:function(){return t.Switch}}),Object.defineProperty(exports,"For",{enumerable:!0,get:function(){return n.For}}),Object.defineProperty(exports,"Repeat",{enumerable:!0,get:function(){return u.Repeat}}),Object.defineProperty(exports,"Dynamic",{enumerable:!0,get:function(){return o.Dynamic}});//# sourceMappingURL=index.js.map |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,SAAS,YAAY;AACrB,SAAS,IAAI,MAAM,aAAa;AAChC,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,WAAW;AACpB,SAAS,cAAc;AAEvB,SAAS,eAAe;AACxB,SAAS,kBAAkB","sourcesContent":["export { Show } from \"./Show\";\nexport { If, True, False } from \"./If\";\nexport { Switch } from \"./Switch\";\nexport { Match } from \"./Match\";\nexport { For } from \"./For\";\nexport { Repeat } from \"./Repeat\";\n// export { Deferred } from \"./Deferred\";\nexport { Dynamic } from \"./Dynamic\";\nexport { overriding } from \"./overriding\";\n"]} | ||
| {"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,SAAS,YAAY;AACrB,SAAS,IAAI,MAAM,aAAa;AAChC,SAAS,QAAQ,aAAa;AAE9B,SAAS,WAAW;AACpB,SAAS,cAAc;AAEvB,SAAS,eAAe","sourcesContent":["export { Show } from \"./Show\";\nexport { If, True, False } from \"./If\";\nexport { Switch, Match } from \"./Switch\";\n// export { Match } from \"./Match\";\nexport { For } from \"./For\";\nexport { Repeat } from \"./Repeat\";\n// export { Deferred } from \"./Deferred\";\nexport { Dynamic } from \"./Dynamic\";\n"]} |
+1
-20
@@ -5,26 +5,7 @@ import React, { ReactNode } from 'react'; | ||
| count: number; | ||
| children: ReactNode | ((index: number) => ReactNode); | ||
| children: (item: number, index: number) => ReactNode; | ||
| empty?: ReactNode | (() => ReactNode); | ||
| }; | ||
| /** | ||
| * Компонент Repeat для повторения дочерних элементов. | ||
| * | ||
| * @param {RepeatProps} props - Параметры компонента. | ||
| * @param {number} props.count - Количество повторений. | ||
| * @param {ReactNode | ((index: number) => ReactNode)} props.children - Дочерние элементы или функция для их рендера. | ||
| * @param {ReactNode | (() => ReactNode)} [props.empty] - Элемент, отображаемый при отсутствии дочерних элементов. | ||
| * | ||
| * @returns {React.ReactElement} React-компонент. | ||
| * | ||
| * @example | ||
| * <Repeat count={5}> | ||
| * {(index) => <p>Элемент {index}</p>} | ||
| * </Repeat> | ||
| * | ||
| * @example | ||
| * <Repeat count={0} empty={<p>Нет элементов</p>}/> | ||
| * | ||
| */ | ||
| declare const Repeat: React.FC<RepeatProps>; | ||
| export { Repeat }; |
+1
-20
@@ -5,26 +5,7 @@ import React, { ReactNode } from 'react'; | ||
| count: number; | ||
| children: ReactNode | ((index: number) => ReactNode); | ||
| children: (item: number, index: number) => ReactNode; | ||
| empty?: ReactNode | (() => ReactNode); | ||
| }; | ||
| /** | ||
| * Компонент Repeat для повторения дочерних элементов. | ||
| * | ||
| * @param {RepeatProps} props - Параметры компонента. | ||
| * @param {number} props.count - Количество повторений. | ||
| * @param {ReactNode | ((index: number) => ReactNode)} props.children - Дочерние элементы или функция для их рендера. | ||
| * @param {ReactNode | (() => ReactNode)} [props.empty] - Элемент, отображаемый при отсутствии дочерних элементов. | ||
| * | ||
| * @returns {React.ReactElement} React-компонент. | ||
| * | ||
| * @example | ||
| * <Repeat count={5}> | ||
| * {(index) => <p>Элемент {index}</p>} | ||
| * </Repeat> | ||
| * | ||
| * @example | ||
| * <Repeat count={0} empty={<p>Нет элементов</p>}/> | ||
| * | ||
| */ | ||
| declare const Repeat: React.FC<RepeatProps>; | ||
| export { Repeat }; |
+1
-1
@@ -1,1 +0,1 @@ | ||
| "use strict";var e=require("react");function t(e){return e&&e.__esModule?e:{default:e}}var n=t(e);const r=e.memo((({count:e,children:t,empty:r})=>{const u=r=>{if(r>=e)return null;const a="function"==typeof t?t(r):t;return n.default.createElement(n.default.Fragment,{key:r},a,u(r+1))};return n.default.createElement(n.default.Fragment,null,0===e?"function"==typeof r?r():r:u(0))}));exports.Repeat=r;//# sourceMappingURL=Repeat.js.map | ||
| "use strict";var e=require("react"),r=require("./For");function t(e){return e&&e.__esModule?e:{default:e}}var a=t(e);const o=e.memo((({count:e,children:t,empty:o})=>a.default.createElement(r.For,{items:Array.from({length:e}).map(((e,r)=>r)),empty:o},t)));exports.Repeat=o;//# sourceMappingURL=Repeat.js.map |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/Repeat.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAkC,YAAY;AA2B9C,MAAM,SAAgC;AAAA,EAC3C,CAAC,EAAE,OAAO,UAAU,MAAM,MAAM;AAC9B,UAAM,iBAAiB,CAAC,UAA6B;AACnD,UAAI,SAAS;AAAO,eAAO;AAC3B,YAAM,UACJ,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;AACrD,aACE,oCAAC,MAAM,UAAN,EAAe,KAAK,SAClB,SACA,eAAe,QAAQ,CAAC,CAC3B;AAAA,IAEJ;AAEA,WACE,0DACG,UAAU,IACP,OAAO,UAAU,aACf,MAAM,IACN,QACF,eAAe,CAAC,CACtB;AAAA,EAEJ;AACF","sourcesContent":["import React, { ReactNode, ReactElement, memo } from \"react\";\n\ntype RepeatProps = {\n count: number;\n children: ReactNode | ((index: number) => ReactNode);\n empty?: ReactNode | (() => ReactNode);\n};\n\n/**\n * Компонент Repeat для повторения дочерних элементов.\n *\n * @param {RepeatProps} props - Параметры компонента.\n * @param {number} props.count - Количество повторений.\n * @param {ReactNode | ((index: number) => ReactNode)} props.children - Дочерние элементы или функция для их рендера.\n * @param {ReactNode | (() => ReactNode)} [props.empty] - Элемент, отображаемый при отсутствии дочерних элементов.\n *\n * @returns {React.ReactElement} React-компонент.\n *\n * @example\n * <Repeat count={5}>\n * {(index) => <p>Элемент {index}</p>}\n * </Repeat>\n *\n * @example\n * <Repeat count={0} empty={<p>Нет элементов</p>}/>\n *\n */\nexport const Repeat: React.FC<RepeatProps> = memo(\n ({ count, children, empty }) => {\n const renderChildren = (index: number): ReactNode => {\n if (index >= count) return null;\n const element =\n typeof children === \"function\" ? children(index) : children;\n return (\n <React.Fragment key={index}>\n {element}\n {renderChildren(index + 1)}\n </React.Fragment>\n );\n };\n\n return (\n <>\n {count === 0\n ? typeof empty === \"function\"\n ? empty()\n : empty\n : renderChildren(0)}\n </>\n );\n },\n);\n"]} | ||
| {"version":3,"sources":["../src/Repeat.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAkC,YAA4B;AACrE,SAAS,WAAW;AAQb,MAAM,SAAgC;AAAA,EAC3C,CAAC,EAAE,OAAO,UAAU,MAAM,MACxB,oCAAC,OAAI,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,SACzD,QACH;AAEJ","sourcesContent":["import React, { ReactNode, ReactElement, memo, isValidElement } from \"react\";\nimport { For } from \"./For\";\n\ntype RepeatProps = {\n count: number;\n children: (item: number, index: number) => ReactNode;\n empty?: ReactNode | (() => ReactNode);\n};\n\nexport const Repeat: React.FC<RepeatProps> = memo(\n ({ count, children, empty }) => (\n <For items={Array.from({ length: count }).map((_, i) => i)} empty={empty}>\n {children}\n </For>\n ),\n);\n"]} |
+3
-3
@@ -1,7 +0,7 @@ | ||
| import React, { FC } from 'react'; | ||
| import { FC, ReactNode } from 'react'; | ||
| type ShowProps = { | ||
| when: boolean; | ||
| fallback?: React.ReactNode; | ||
| children: React.ReactNode; | ||
| fallback?: ReactNode; | ||
| children: ReactNode; | ||
| }; | ||
@@ -8,0 +8,0 @@ declare const Show: FC<ShowProps>; |
+3
-3
@@ -1,7 +0,7 @@ | ||
| import React, { FC } from 'react'; | ||
| import { FC, ReactNode } from 'react'; | ||
| type ShowProps = { | ||
| when: boolean; | ||
| fallback?: React.ReactNode; | ||
| children: React.ReactNode; | ||
| fallback?: ReactNode; | ||
| children: ReactNode; | ||
| }; | ||
@@ -8,0 +8,0 @@ declare const Show: FC<ShowProps>; |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/Show.tsx"],"names":[],"mappings":"AAAA,SAAS,eAAe;AAgBjB,MAAM,OAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEJ,SAAO,QAAQ,KAAK,MAAM,UAAU,YAAY,IAAI;AAwBtD","sourcesContent":["import { Logical } from \"@namelessdev/helper\";\nimport React, {\n FC,\n Fragment,\n ReactElement,\n cloneElement,\n createElement,\n isValidElement,\n} from \"react\";\n\ntype ShowProps = {\n when: boolean;\n fallback?: React.ReactNode;\n children: React.ReactNode;\n};\n\nexport const Show: FC<ShowProps> = ({\n when,\n fallback,\n children,\n}) => {\n // return when ? children : fallback || null;\n return Logical.when(when, children, fallback || null)\n // const Comp = when ? children : fallback || null;\n // if (!slot) return Comp;\n //\n // const cloneComp = (component: ReactElement) =>\n // cloneElement(\n // component,\n // Object.assign({}, component.props, { slot, ...props }),\n // component.props.children,\n // );\n //\n // if (Array.isArray(Comp))\n // return createElement(\n // Fragment,\n // {},\n // Comp.map((elem) => {\n // if (!isValidElement(elem)) return elem;\n // return cloneComp(elem);\n // }),\n // );\n // else {\n // if (!isValidElement(Comp)) return <slot name={slot}> {Comp} </slot>;\n // return cloneComp(Comp);\n // }\n};\n"]} | ||
| {"version":3,"sources":["../src/Show.tsx"],"names":[],"mappings":"AAAA,SAAS,eAAe;AASjB,MAAM,OAAsB,CAAC,EAAE,MAAM,UAAU,SAAS,MAAM;AACnE,SAAO,QAAQ,KAAK,MAAM,UAAU,YAAY,IAAI;AACtD","sourcesContent":["import { Logical } from \"@namelessdev/helper\";\nimport { FC, ReactNode } from \"react\";\n\ntype ShowProps = {\n when: boolean;\n fallback?: ReactNode;\n children: ReactNode;\n};\n\nexport const Show: FC<ShowProps> = ({ when, fallback, children }) => {\n return Logical.when(when, children, fallback || null);\n};\n"]} |
+7
-18
@@ -1,2 +0,2 @@ | ||
| import React, { ReactElement } from 'react'; | ||
| import React, { FC, ReactElement, ReactNode } from 'react'; | ||
@@ -7,20 +7,9 @@ interface SwitchProps { | ||
| } | ||
| /** | ||
| * Компонент `Switch` работает аналогично оператору switch в JavaScript. | ||
| * Он принимает произвольное количество дочерних компонентов `Match` и возвращает первый `Match`, чье свойство `when` равно `true`. | ||
| * Если такого `Match` нет, возвращается компонент, указанный в свойстве `fallback`. | ||
| * | ||
| * @param {ReactElement | ReactElement[]} children - Дочерние элементы, которые могут включать один или несколько компонентов `Match`. | ||
| * @param {ReactElement} fallback - Элемент, который будет отображен, если ни один из дочерних компонентов `Match` не соответствует условию. | ||
| * @returns {ReactElement} Возвращает первый подходящий `Match` или `fallback` элемент. | ||
| * | ||
| * @example | ||
| * <Switch fallback={<DefaultComponent />}> | ||
| * <Match when={condition1}><Component1 /></Match> | ||
| * <Match when={condition2}><Component2 /></Match> | ||
| * ... | ||
| * </Switch> | ||
| */ | ||
| declare const Switch: React.FC<SwitchProps>; | ||
| interface MatchProps { | ||
| when: boolean; | ||
| children: ReactNode; | ||
| } | ||
| declare const Match: FC<MatchProps>; | ||
| export { Switch }; | ||
| export { Match, Switch }; |
+7
-18
@@ -1,2 +0,2 @@ | ||
| import React, { ReactElement } from 'react'; | ||
| import React, { FC, ReactElement, ReactNode } from 'react'; | ||
@@ -7,20 +7,9 @@ interface SwitchProps { | ||
| } | ||
| /** | ||
| * Компонент `Switch` работает аналогично оператору switch в JavaScript. | ||
| * Он принимает произвольное количество дочерних компонентов `Match` и возвращает первый `Match`, чье свойство `when` равно `true`. | ||
| * Если такого `Match` нет, возвращается компонент, указанный в свойстве `fallback`. | ||
| * | ||
| * @param {ReactElement | ReactElement[]} children - Дочерние элементы, которые могут включать один или несколько компонентов `Match`. | ||
| * @param {ReactElement} fallback - Элемент, который будет отображен, если ни один из дочерних компонентов `Match` не соответствует условию. | ||
| * @returns {ReactElement} Возвращает первый подходящий `Match` или `fallback` элемент. | ||
| * | ||
| * @example | ||
| * <Switch fallback={<DefaultComponent />}> | ||
| * <Match when={condition1}><Component1 /></Match> | ||
| * <Match when={condition2}><Component2 /></Match> | ||
| * ... | ||
| * </Switch> | ||
| */ | ||
| declare const Switch: React.FC<SwitchProps>; | ||
| interface MatchProps { | ||
| when: boolean; | ||
| children: ReactNode; | ||
| } | ||
| declare const Match: FC<MatchProps>; | ||
| export { Switch }; | ||
| export { Match, Switch }; |
+1
-1
@@ -1,1 +0,1 @@ | ||
| "use strict";var e=require("react"),r=require("./Match"),t=require("@namelessdev/helper");function a(e){return e&&e.__esModule?e:{default:e}}var l=a(e);exports.Switch=({children:e,fallback:a})=>{const n=l.default.Children.toArray(e).find((e=>t.Logical.and(l.default.isValidElement(e),e.type===r.Match,e.props.when)));return l.default.createElement(l.default.Fragment,null,n||a)};//# sourceMappingURL=Switch.js.map | ||
| "use strict";var e=require("react"),t=require("@namelessdev/slots");function r(e){return e&&e.__esModule?e:{default:e}}var a=r(e);const l=t.wrap("match",(({children:e})=>e));exports.Match=l,exports.Switch=({children:e,fallback:r})=>{const{Match:l}=t.retrive(e,{name:"match",filter:e=>a.default.isValidElement(e)&&e.props.when});return a.default.createElement(l,null,r)};//# sourceMappingURL=Switch.js.map |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,WAA6B;AACpC,SAAS,aAAa;AACtB,SAAS,eAAe;AAsBjB,MAAM,SAAgC,CAAC,EAAE,UAAU,SAAS,MAAM;AACvE,QAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAC7C,CAAC,UACC,QAAQ;AAAA,MACN,MAAM,eAAe,KAAK;AAAA,MACzB,MAAuB,SAAS;AAAA,MAChC,MAAuB,MAAM;AAAA,IAChC;AAAA,EACJ;AAEA,SAAO,0DAAG,SAAS,QAAS;AAC9B","sourcesContent":["import React, { ReactElement } from \"react\";\nimport { Match } from \"./Match\";\nimport { Logical } from \"@namelessdev/helper\";\n\ninterface SwitchProps {\n children: ReactElement | ReactElement[];\n fallback: ReactElement;\n}\n/**\n * Компонент `Switch` работает аналогично оператору switch в JavaScript.\n * Он принимает произвольное количество дочерних компонентов `Match` и возвращает первый `Match`, чье свойство `when` равно `true`.\n * Если такого `Match` нет, возвращается компонент, указанный в свойстве `fallback`.\n *\n * @param {ReactElement | ReactElement[]} children - Дочерние элементы, которые могут включать один или несколько компонентов `Match`.\n * @param {ReactElement} fallback - Элемент, который будет отображен, если ни один из дочерних компонентов `Match` не соответствует условию.\n * @returns {ReactElement} Возвращает первый подходящий `Match` или `fallback` элемент.\n *\n * @example\n * <Switch fallback={<DefaultComponent />}>\n * <Match when={condition1}><Component1 /></Match>\n * <Match when={condition2}><Component2 /></Match>\n * ...\n * </Switch>\n */\nexport const Switch: React.FC<SwitchProps> = ({ children, fallback }) => {\n const match = React.Children.toArray(children).find(\n (child: React.ReactNode) =>\n Logical.and(\n React.isValidElement(child),\n (child as ReactElement).type === Match,\n (child as ReactElement).props.when,\n ),\n ) as ReactElement | undefined;\n\n return <>{match || fallback}</>;\n};\n"]} | ||
| {"version":3,"sources":["../src/Switch.tsx"],"names":["Match"],"mappings":"AAAA,OAAO,WAA4C;AACnD,SAAS,SAAS,YAAY;AAOvB,MAAM,SAAgC,CAAC,EAAE,UAAU,SAAS,MAAM;AACvE,QAAM,EAAE,OAAAA,OAAM,IAAI,QAAQ,UAAU;AAAA,IAClC,MAAM;AAAA,IACN,QAAQ,CAAC,UACP,MAAM,eAAe,KAAK,KAAM,MAAuB,MAAM;AAAA,EACjE,CAAC;AACD,SAAO,oCAACA,QAAA,MAAO,QAAS;AAC1B;AAOO,MAAM,QAAwB,KAAK,SAAS,CAAC,EAAE,SAAS,MAAM,QAAQ","sourcesContent":["import React, { FC, ReactElement, ReactNode } from \"react\";\nimport { retrive, wrap } from \"@namelessdev/slots\";\n\ninterface SwitchProps {\n children: ReactElement | ReactElement[];\n fallback: ReactElement;\n}\n\nexport const Switch: React.FC<SwitchProps> = ({ children, fallback }) => {\n const { Match } = retrive(children, {\n name: \"match\",\n filter: (child) =>\n React.isValidElement(child) && (child as ReactElement).props.when,\n });\n return <Match>{fallback}</Match>;\n};\n\ninterface MatchProps {\n when: boolean;\n children: ReactNode;\n}\n\nexport const Match: FC<MatchProps> = wrap(\"match\", ({ children }) => children);\n"]} |
+3
-3
| { | ||
| "name": "@namelessdev/flow", | ||
| "version": "0.0.2", | ||
| "version": "0.0.3", | ||
| "description": "", | ||
@@ -44,4 +44,4 @@ "main": "./build/index.js", | ||
| "dependencies": { | ||
| "@namelessdev/helper": "0.0.2", | ||
| "@namelessdev/slots": "0.0.2" | ||
| "@namelessdev/slots": "0.0.7", | ||
| "@namelessdev/helper": "0.0.2" | ||
| }, | ||
@@ -48,0 +48,0 @@ "scripts": { |
+147
-1
@@ -1,1 +0,147 @@ | ||
| # `@namelessdev/helper` | ||
| ## Beta version, not intended for production | ||
| Library for controlling the flow of displaying page elements. | ||
| ## For | ||
| A component for drawing arrays. This component will add for you | ||
| element key, you can pass a function to define kye to props keys, | ||
| if you don't, it will take the index of the element. | ||
| It is also possible to pass an item that will be displayed if the | ||
| the array you passed to items is empty. | ||
| ```tsx | ||
| type ForProps<T> = { | ||
| items: T[]; | ||
| children: (item: T, index: number) => ReactNode; | ||
| keys?: (item: T, index: number) => React.Key; | ||
| empty?: ReactNode | (() => ReactNode) | React.FC; | ||
| }; | ||
| <For | ||
| items={[1, 2, 3, 4, 5]} | ||
| keys={(item, index) => item * index} | ||
| empty={<div>Array is Empty</div>} | ||
| > | ||
| {(item) => <div>Element: {item}</div>} | ||
| </For>; | ||
| ``` | ||
| ## Repeat | ||
| A simple component that repeats count once, it is also possible to display an item if count === 0 | ||
| ```tsx | ||
| type RepeatProps = { | ||
| count: number; | ||
| children: ReactNode | ((index: number) => ReactNode); | ||
| empty?: ReactNode | (() => ReactNode); | ||
| }; | ||
| <Repeat count={5}> | ||
| {(index) => <p>Element {index}</p>} | ||
| </Repeat> | ||
| <Repeat count={0} empty={<p>There are no elements</p>}/> | ||
| ``` | ||
| ## Show | ||
| Component for conditional drawing of children. It takes a condition in props when and draws children if it is true. If you need to draw another element if the condition is false, you can pass it to the props fallback, but for such cases it is better to use the If component. | ||
| ```tsx | ||
| type ShowProps = { | ||
| when: boolean; | ||
| fallback?: ReactNode; | ||
| children: ReactNode; | ||
| }; | ||
| <Show when={isShow}> | ||
| <h1>Hello User</h1> | ||
| </Show>; | ||
| ``` | ||
| ## If | ||
| Also a conditional drawing component, but more designed to draw either one element or the other. It is based on the slots system from the [@namelessdev/slots](https://www.npmjs.com/package/@namelessdev/slots) library. It takes a condition in props when and two child elements that are slots true and false. it also comes with components that are these slots True and False or you can give a slot="true" attribute to the element or wrap it in a `<slot name="true">` tag. components that are not slots will not be rendered. | ||
| ```tsx | ||
| type IfProps = { | ||
| when: boolean; | ||
| children: ReactElement | ReactElement[]; | ||
| }; | ||
| <If when={isAutorizate}> | ||
| <True>You're logged in</True> | ||
| <False>Please log in to your account</False> | ||
| </If> | ||
| <If when={isAutorizate}> | ||
| <h1 slot="true">You're logged in</h1> | ||
| <h1 slot="false">Please log in to your account</h1> | ||
| </If> | ||
| <If when={isAutorizate}> | ||
| <slot name="true">You're logged in</slot> | ||
| <slot name="false">Please log in to your account</slot> | ||
| </If> | ||
| ``` | ||
| ## Switch / Match | ||
| This is analogous to switch/case from JS, but for drawing elements. | ||
| The Switch component is a wrapper that accepts Match components as children and an optional fallback attribute, which is an element if no element will be rendered. All Match with when === true will be rendered. | ||
| The Match component accepts the when attribute which is a condition and child elements. | ||
| ```tsx | ||
| type SwitchProps = { | ||
| children: ReactElement | ReactElement[]; | ||
| fallback: ReactElement; | ||
| }; | ||
| type MatchProps = { | ||
| when: boolean; | ||
| children: ReactNode; | ||
| }; | ||
| <Switch fallback={"You are not authorised"}> | ||
| <Match when={user.role === "user"}>Your role as User</Match> | ||
| <Match when={user.role === "creator"}>Your role as Creator</Match> | ||
| <Match when={user.role === "admin"}>Your role as Admin</Match> | ||
| </Switch>; | ||
| ``` | ||
| ## Deferred | ||
| A component that displays child elements after a timeout of milliseconds and can display placeholder until then | ||
| ```tsx | ||
| type DeferredProps = { | ||
| timeout: number; | ||
| children: ReactNode; | ||
| placeholder?: ReactNode; | ||
| }; | ||
| <Deferred timeout={2500} placeholder={"Wait 2.5 seconds."}> | ||
| It's been 2.5 seconds | ||
| </Deferred>; | ||
| ``` | ||
| ## Dynamic | ||
| A component that can dynamically modify the tag or component it is. It accepts the tag or component to use and the props of that element | ||
| ```tsx | ||
| const RedThing = () => <strong>Red Thing</strong>; | ||
| const GreenThing = () => <strong>Green Thing</strong>; | ||
| const BlueThing = () => <strong>Blue Thing</strong>; | ||
| const options = { | ||
| red: RedThing, | ||
| green: GreenThing, | ||
| blue: BlueThing | ||
| } | ||
| <Dynamic component={options[selected]} /> | ||
| <Dynamic component={options[selected]} props={{ className: "active" }} /> | ||
| ``` |
| import e from"react";const r=e.memo((({children:r})=>e.createElement(e.Fragment,null,r)));export{r as Match};//# sourceMappingURL=Match.js.map |
| {"version":3,"sources":["../../src/Match.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW;AAmBX,MAAM,QAA8B,MAAM,KAAK,CAAC,EAAE,SAAS,MAAM;AACtE,SAAO,0DAAG,QAAS;AACrB,CAAC","sourcesContent":["import React from \"react\";\n\ninterface MatchProps {\n when: boolean;\n children: React.ReactNode;\n}\n/**\n * Компонент `Match` используется в сочетании с `Switch`.\n * Он отображает своих детей (`children`), если свойство `when` истинно (true).\n *\n * @param {boolean} when - Условие, определяющее, будет ли отображаться содержимое компонента.\n * @param {React.ReactNode} children - Дочерние элементы, которые будут отображаться, если `when` истинно.\n * @returns {ReactElement | null} Возвращает дочерние элементы, если `when` истинно, в противном случае ничего не отображает.\n *\n * @example\n * <Match when={someCondition}>\n * <SomeComponent />\n * </Match>\n */\nexport const Match: React.FC<MatchProps> = React.memo(({ children }) => {\n return <>{children}</>;\n});\n"]} |
| import r from"react";import{Record as e,cn as s}from"@namelessdev/helper";const p=(e,s,n)=>r.Children.map(e,(e=>r.isValidElement(e)?e.props[`data-${s}`]?Object.assign({},e,{props:n(e.props)}):e.props||e.props.children?r.cloneElement(e,e.props,p(e.props.children||[],s,n)):e:e));const n=(r,e)=>Object.entries(e).reduce(((r,[e,s])=>Array.isArray(s)?s.reduce(((r,s)=>p(r,e,s)),r):p(r,e,s)),r);n.chain=function(...r){return(...e)=>r.forEach((r=>{"function"==typeof r&&r(...e)}))},n.assign=e.assing,n.cn=(...r)=>s(...r),n.props=r=>e=>Object.assign({},e,r(e));export{n as overriding,p as overridingRoot};//# sourceMappingURL=overriding.js.map |
| {"version":3,"sources":["../../src/overriding.ts"],"names":[],"mappings":"AAAA,OAAO,WAA6B;AACpC,SAAS,IAAI,cAAc;AAOpB,MAAM,iBAAiB,CAI5B,UACA,MACA,WACiB;AACjB,SAAO,MAAM,SAAS,IAAI,UAAU,CAAC,UAAwB;AAC3D,QAAI,CAAC,MAAM,eAAe,KAAK;AAAG,aAAO;AACzC,QAAK,MAAM,MAA4C,QAAQ,IAAI,EAAE;AACnE,aAAO,OAAO,OAAO,CAAC,GAAG,OAAO;AAAA,QAC9B,OAAO,OAAO,MAAM,KAAU;AAAA,MAChC,CAAC;AAEH,QAAI,CAAC,MAAM,SAAS,CAAE,MAAM,MAAkC;AAC5D,aAAO;AAAA;AAEP,aAAO,MAAM;AAAA,QACX;AAAA,QACC,MAAuB;AAAA,QACxB,eAAgB,MAAM,MAAc,YAAY,CAAC,GAAG,MAAM,MAAM;AAAA,MAClE;AAAA,EACJ,CAAC;AACH;AAIA,SAAS,SAAY,QAA2B;AAC9C,SAAO,IAAI,SACT,OAAO,QAAQ,CAAC,OAAO;AACrB,QAAI,OAAO,OAAO;AAAY,SAAG,GAAG,IAAI;AAAA,EAC1C,CAAC;AACL;AAEO,MAAM,aAAa,CACxB,UACA,SAKoB;AACpB,SAAO,OAAO,QAAQ,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM;AACzD,QAAI,CAAC,MAAM,QAAQ,KAAK;AAAG,aAAO,eAAe,KAAK,MAAM,KAAK;AAAA;AAC5D,aAAO,MAAM,OAAO,CAAC,IAAI,OAAO,eAAe,IAAI,MAAM,EAAE,GAAG,GAAG;AAAA,EACxE,GAAG,QAAQ;AACb;AAEA,WAAW,QAAQ;AACnB,WAAW,SAAS,OAAO;AAC3B,WAAW,KAAK,IAAI,SAAgB,GAAG,GAAG,IAAI;AAC9C,WAAW,QACT,CAAC,aACD,CAAC,UACC,OAAO,OAAO,CAAC,GAAG,OAAO,SAAS,KAAK,CAAC","sourcesContent":["import React, { ReactElement } from \"react\";\nimport { cn, Record } from \"@namelessdev/helper\";\n\ntype OverridingFunction<\n P extends Record<string, unknown>,\n T extends Record<string, unknown>,\n> = (props: P) => T;\n\nexport const overridingRoot = <\n P extends Record<string, unknown>,\n T extends Record<string, unknown>,\n>(\n children: ReactElement,\n name: string,\n setter: OverridingFunction<P, T>,\n): ReactElement => {\n return React.Children.map(children, (child: ReactElement) => {\n if (!React.isValidElement(child)) return child;\n if ((child.props as Record<`data-${string}`, unknown>)[`data-${name}`])\n return Object.assign({}, child, {\n props: setter(child.props as P),\n });\n\n if (!child.props && !(child.props as Record<string, unknown>).children)\n return child;\n else\n return React.cloneElement(\n child,\n (child as ReactElement).props,\n overridingRoot((child.props as any).children || [], name, setter),\n );\n }) as unknown as ReactElement;\n};\n\ntype FunctionType<T> = (...args: any[]) => T;\n\nfunction chain<T>(...functs: FunctionType<T>[]) {\n return (...args: any[]) =>\n functs.forEach((fn) => {\n if (typeof fn === \"function\") fn(...args);\n });\n}\n\nexport const overriding = <P extends Record<string, unknown>, C>(\n children: ReactElement,\n over: Record<\n string,\n | OverridingFunction<P, Record<string, unknown>>\n | Array<OverridingFunction<P, Record<string, unknown>>>\n >,\n): ReactElement<C> => {\n return Object.entries(over).reduce((acc, [name, funcs]) => {\n if (!Array.isArray(funcs)) return overridingRoot(acc, name, funcs);\n else return funcs.reduce((ac, fn) => overridingRoot(ac, name, fn), acc);\n }, children);\n};\n\noverriding.chain = chain;\noverriding.assign = Record.assing;\noverriding.cn = (...args: any[]) => cn(...args);\noverriding.props =\n (newProps: (props: ReactElement[\"props\"]) => Record<string, unknown>) =>\n (props: ReactElement[\"props\"]) =>\n Object.assign({}, props, newProps(props));\n"]} |
| import React from 'react'; | ||
| interface MatchProps { | ||
| when: boolean; | ||
| children: React.ReactNode; | ||
| } | ||
| /** | ||
| * Компонент `Match` используется в сочетании с `Switch`. | ||
| * Он отображает своих детей (`children`), если свойство `when` истинно (true). | ||
| * | ||
| * @param {boolean} when - Условие, определяющее, будет ли отображаться содержимое компонента. | ||
| * @param {React.ReactNode} children - Дочерние элементы, которые будут отображаться, если `when` истинно. | ||
| * @returns {ReactElement | null} Возвращает дочерние элементы, если `when` истинно, в противном случае ничего не отображает. | ||
| * | ||
| * @example | ||
| * <Match when={someCondition}> | ||
| * <SomeComponent /> | ||
| * </Match> | ||
| */ | ||
| declare const Match: React.FC<MatchProps>; | ||
| export { Match }; |
| import React from 'react'; | ||
| interface MatchProps { | ||
| when: boolean; | ||
| children: React.ReactNode; | ||
| } | ||
| /** | ||
| * Компонент `Match` используется в сочетании с `Switch`. | ||
| * Он отображает своих детей (`children`), если свойство `when` истинно (true). | ||
| * | ||
| * @param {boolean} when - Условие, определяющее, будет ли отображаться содержимое компонента. | ||
| * @param {React.ReactNode} children - Дочерние элементы, которые будут отображаться, если `when` истинно. | ||
| * @returns {ReactElement | null} Возвращает дочерние элементы, если `when` истинно, в противном случае ничего не отображает. | ||
| * | ||
| * @example | ||
| * <Match when={someCondition}> | ||
| * <SomeComponent /> | ||
| * </Match> | ||
| */ | ||
| declare const Match: React.FC<MatchProps>; | ||
| export { Match }; |
| "use strict";function e(e){return e&&e.__esModule?e:{default:e}}var t=e(require("react"));const r=t.default.memo((({children:e})=>t.default.createElement(t.default.Fragment,null,e)));exports.Match=r;//# sourceMappingURL=Match.js.map |
| {"version":3,"sources":["../src/Match.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW;AAmBX,MAAM,QAA8B,MAAM,KAAK,CAAC,EAAE,SAAS,MAAM;AACtE,SAAO,0DAAG,QAAS;AACrB,CAAC","sourcesContent":["import React from \"react\";\n\ninterface MatchProps {\n when: boolean;\n children: React.ReactNode;\n}\n/**\n * Компонент `Match` используется в сочетании с `Switch`.\n * Он отображает своих детей (`children`), если свойство `when` истинно (true).\n *\n * @param {boolean} when - Условие, определяющее, будет ли отображаться содержимое компонента.\n * @param {React.ReactNode} children - Дочерние элементы, которые будут отображаться, если `when` истинно.\n * @returns {ReactElement | null} Возвращает дочерние элементы, если `when` истинно, в противном случае ничего не отображает.\n *\n * @example\n * <Match when={someCondition}>\n * <SomeComponent />\n * </Match>\n */\nexport const Match: React.FC<MatchProps> = React.memo(({ children }) => {\n return <>{children}</>;\n});\n"]} |
| import React, { ReactElement } from 'react'; | ||
| import { Record } from '@namelessdev/helper'; | ||
| type OverridingFunction<P extends Record<string, unknown>, T extends Record<string, unknown>> = (props: P) => T; | ||
| declare const overridingRoot: <P extends Record<string, unknown>, T extends Record<string, unknown>>(children: ReactElement, name: string, setter: OverridingFunction<P, T>) => ReactElement; | ||
| type FunctionType<T> = (...args: any[]) => T; | ||
| declare function chain<T>(...functs: FunctionType<T>[]): (...args: any[]) => void; | ||
| declare const overriding: { | ||
| <P extends Record<string, unknown>, C>(children: ReactElement, over: Record<string, OverridingFunction<P, Record<string, unknown>> | OverridingFunction<P, Record<string, unknown>>[]>): React.ReactElement<C, string | React.JSXElementConstructor<any>>; | ||
| chain: typeof chain; | ||
| assign: (receiverObject: Record<string, any>, ...sourceObjects: Record<string, any>[]) => Record<string, any>; | ||
| cn(...args: any[]): string; | ||
| props(newProps: (props: ReactElement["props"]) => Record<string, unknown>): (props: ReactElement["props"]) => any; | ||
| }; | ||
| export { overriding, overridingRoot }; |
| import React, { ReactElement } from 'react'; | ||
| import { Record } from '@namelessdev/helper'; | ||
| type OverridingFunction<P extends Record<string, unknown>, T extends Record<string, unknown>> = (props: P) => T; | ||
| declare const overridingRoot: <P extends Record<string, unknown>, T extends Record<string, unknown>>(children: ReactElement, name: string, setter: OverridingFunction<P, T>) => ReactElement; | ||
| type FunctionType<T> = (...args: any[]) => T; | ||
| declare function chain<T>(...functs: FunctionType<T>[]): (...args: any[]) => void; | ||
| declare const overriding: { | ||
| <P extends Record<string, unknown>, C>(children: ReactElement, over: Record<string, OverridingFunction<P, Record<string, unknown>> | OverridingFunction<P, Record<string, unknown>>[]>): React.ReactElement<C, string | React.JSXElementConstructor<any>>; | ||
| chain: typeof chain; | ||
| assign: (receiverObject: Record<string, any>, ...sourceObjects: Record<string, any>[]) => Record<string, any>; | ||
| cn(...args: any[]): string; | ||
| props(newProps: (props: ReactElement["props"]) => Record<string, unknown>): (props: ReactElement["props"]) => any; | ||
| }; | ||
| export { overriding, overridingRoot }; |
| "use strict";var e=require("react"),r=require("@namelessdev/helper");function s(e){return e&&e.__esModule?e:{default:e}}var n=s(e);const t=(e,r,s)=>n.default.Children.map(e,(e=>n.default.isValidElement(e)?e.props[`data-${r}`]?Object.assign({},e,{props:s(e.props)}):e.props||e.props.children?n.default.cloneElement(e,e.props,t(e.props.children||[],r,s)):e:e));const o=(e,r)=>Object.entries(r).reduce(((e,[r,s])=>Array.isArray(s)?s.reduce(((e,s)=>t(e,r,s)),e):t(e,r,s)),e);o.chain=function(...e){return(...r)=>e.forEach((e=>{"function"==typeof e&&e(...r)}))},o.assign=r.Record.assing,o.cn=(...e)=>r.cn(...e),o.props=e=>r=>Object.assign({},r,e(r)),exports.overriding=o,exports.overridingRoot=t;//# sourceMappingURL=overriding.js.map |
| {"version":3,"sources":["../src/overriding.ts"],"names":[],"mappings":"AAAA,OAAO,WAA6B;AACpC,SAAS,IAAI,cAAc;AAOpB,MAAM,iBAAiB,CAI5B,UACA,MACA,WACiB;AACjB,SAAO,MAAM,SAAS,IAAI,UAAU,CAAC,UAAwB;AAC3D,QAAI,CAAC,MAAM,eAAe,KAAK;AAAG,aAAO;AACzC,QAAK,MAAM,MAA4C,QAAQ,IAAI,EAAE;AACnE,aAAO,OAAO,OAAO,CAAC,GAAG,OAAO;AAAA,QAC9B,OAAO,OAAO,MAAM,KAAU;AAAA,MAChC,CAAC;AAEH,QAAI,CAAC,MAAM,SAAS,CAAE,MAAM,MAAkC;AAC5D,aAAO;AAAA;AAEP,aAAO,MAAM;AAAA,QACX;AAAA,QACC,MAAuB;AAAA,QACxB,eAAgB,MAAM,MAAc,YAAY,CAAC,GAAG,MAAM,MAAM;AAAA,MAClE;AAAA,EACJ,CAAC;AACH;AAIA,SAAS,SAAY,QAA2B;AAC9C,SAAO,IAAI,SACT,OAAO,QAAQ,CAAC,OAAO;AACrB,QAAI,OAAO,OAAO;AAAY,SAAG,GAAG,IAAI;AAAA,EAC1C,CAAC;AACL;AAEO,MAAM,aAAa,CACxB,UACA,SAKoB;AACpB,SAAO,OAAO,QAAQ,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM;AACzD,QAAI,CAAC,MAAM,QAAQ,KAAK;AAAG,aAAO,eAAe,KAAK,MAAM,KAAK;AAAA;AAC5D,aAAO,MAAM,OAAO,CAAC,IAAI,OAAO,eAAe,IAAI,MAAM,EAAE,GAAG,GAAG;AAAA,EACxE,GAAG,QAAQ;AACb;AAEA,WAAW,QAAQ;AACnB,WAAW,SAAS,OAAO;AAC3B,WAAW,KAAK,IAAI,SAAgB,GAAG,GAAG,IAAI;AAC9C,WAAW,QACT,CAAC,aACD,CAAC,UACC,OAAO,OAAO,CAAC,GAAG,OAAO,SAAS,KAAK,CAAC","sourcesContent":["import React, { ReactElement } from \"react\";\nimport { cn, Record } from \"@namelessdev/helper\";\n\ntype OverridingFunction<\n P extends Record<string, unknown>,\n T extends Record<string, unknown>,\n> = (props: P) => T;\n\nexport const overridingRoot = <\n P extends Record<string, unknown>,\n T extends Record<string, unknown>,\n>(\n children: ReactElement,\n name: string,\n setter: OverridingFunction<P, T>,\n): ReactElement => {\n return React.Children.map(children, (child: ReactElement) => {\n if (!React.isValidElement(child)) return child;\n if ((child.props as Record<`data-${string}`, unknown>)[`data-${name}`])\n return Object.assign({}, child, {\n props: setter(child.props as P),\n });\n\n if (!child.props && !(child.props as Record<string, unknown>).children)\n return child;\n else\n return React.cloneElement(\n child,\n (child as ReactElement).props,\n overridingRoot((child.props as any).children || [], name, setter),\n );\n }) as unknown as ReactElement;\n};\n\ntype FunctionType<T> = (...args: any[]) => T;\n\nfunction chain<T>(...functs: FunctionType<T>[]) {\n return (...args: any[]) =>\n functs.forEach((fn) => {\n if (typeof fn === \"function\") fn(...args);\n });\n}\n\nexport const overriding = <P extends Record<string, unknown>, C>(\n children: ReactElement,\n over: Record<\n string,\n | OverridingFunction<P, Record<string, unknown>>\n | Array<OverridingFunction<P, Record<string, unknown>>>\n >,\n): ReactElement<C> => {\n return Object.entries(over).reduce((acc, [name, funcs]) => {\n if (!Array.isArray(funcs)) return overridingRoot(acc, name, funcs);\n else return funcs.reduce((ac, fn) => overridingRoot(ac, name, fn), acc);\n }, children);\n};\n\noverriding.chain = chain;\noverriding.assign = Record.assing;\noverriding.cn = (...args: any[]) => cn(...args);\noverriding.props =\n (newProps: (props: ReactElement[\"props\"]) => Record<string, unknown>) =>\n (props: ReactElement[\"props\"]) =>\n Object.assign({}, props, newProps(props));\n"]} |
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 3 instances in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 4 instances in 1 package
14
-17.65%148
7300%29280
-42.89%50
-19.35%72
-50.34%+ Added
- Removed
Updated