From 35dfd7706534fbaea751351243d6ac36ab6e64c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E6=B4=8B?= <251448644@qq.com> Date: Mon, 8 Jan 2024 20:00:23 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I8UJOZ]=20=E6=B7=BB=E5=8A=A0dee?= =?UTF-8?q?pmerge=E6=96=87=E6=A1=A3=E5=88=B01224?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/deepmerge.md | 101 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 1224/deepmerge.md diff --git a/1224/deepmerge.md b/1224/deepmerge.md new file mode 100644 index 00000000..80174683 --- /dev/null +++ b/1224/deepmerge.md @@ -0,0 +1,101 @@ +> 模板版本：v0.1.2 + +

+

deepmerge

+

+

+ + License + +

+ +>[!tip] [Github 地址](https://github.com/TehShrike/deepmerge) + + +## 安装与使用 + +进入到工程目录并输入以下命令： + +#### **yarn** + +```bash +yarn add deepmerge +``` + + +#### **npm** + +```bash +npm install deepmerge +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import deepmerge from 'deepmerge' + +const x = { + foo: { bar: 3 }, + array: [{ + does: 'work', + too: [ 1, 2, 3 ] + }] +} + +const y = { + foo: { baz: 4 }, + quux: 5, + array: [{ + does: 'work', + too: [ 4, 5, 6 ] + }, { + really: 'yes' + }] +} + +const output = { + foo: { + bar: 3, + baz: 4 + }, + array: [{ + does: 'work', + too: [ 1, 2, 3 ] + }, { + does: 'work', + too: [ 4, 5, 6 ] + }, { + really: 'yes' + }], + quux: 5 +} + +deepmerge(x, y) // => output +``` + +## 约束与限制 + +### 兼容性 + + 在下述版本验证通过： + + 1. IDE：DevEco Studio 4.1.3.412;SDK：OpenHarmony(api11) 4.1.0.53;测试设备：Mate40 Pro(NOH-AN00);ROM：2.0.0.52(SP22C00E52R1P17log);RNOH：0.72.11 + +## API + +详情见 [deepmerge源库地址](https://github.com/TehShrike/deepmerge) + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---- | ---- | ---- | -------- | -------- | -------- | +| deepmerge(x, y, [options]) | Merge two objects x and y deeply, returning a new merged object with the elements from both x and y. | function | No | / | Yes | +| deepmerge.all(arrayOfObjects, [options]) | Merges any number of objects into a single result object. | function | No | / | Yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/TehShrike/deepmerge/blob/master/license.txt) ，请自由地享受和参与开源。 -- Gitee From e831e4fb7d3ed75c2e26f10a43f6c38d626335c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E6=B4=8B?= <251448644@qq.com> Date: Tue, 9 Jan 2024 18:57:10 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I8UJOZ]=20=E6=8F=90=E4=BA=A4dee?= =?UTF-8?q?pmerge=E6=96=87=E6=A1=A3=E5=88=B01224?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/deepmerge.md | 10 +- 1224/styled-components.md | 97 ----------------- 1224/styled-system.md | 217 -------------------------------------- 3 files changed, 7 insertions(+), 317 deletions(-) delete mode 100644 1224/styled-components.md delete mode 100644 1224/styled-system.md diff --git a/1224/deepmerge.md b/1224/deepmerge.md index 80174683..e8ba1b90 100644 --- a/1224/deepmerge.md +++ b/1224/deepmerge.md @@ -85,12 +85,16 @@ deepmerge(x, y) // => output ## API +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + 详情见 [deepmerge源库地址](https://github.com/TehShrike/deepmerge) -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ---- | ---- | -------- | -------- | -------- | -| deepmerge(x, y, [options]) | Merge two objects x and y deeply, returning a new merged object with the elements from both x and y. | function | No | / | Yes | -| deepmerge.all(arrayOfObjects, [options]) | Merges any number of objects into a single result object. | function | No | / | Yes | +| deepmerge(x, y, [options]) | Merge two objects x and y deeply, returning a new merged object with the elements from both x and y. | function | no | / | yes | +| deepmerge.all(arrayOfObjects, [options]) | Merges any number of objects into a single result object. | function | no | / | yes | ## 遗留问题 diff --git a/1224/styled-components.md b/1224/styled-components.md deleted file mode 100644 index f69f79f6..00000000 --- a/1224/styled-components.md +++ /dev/null @@ -1,97 +0,0 @@ -> 模板版本：v0.1.2 - -

-

styled-components

-

-

- - License - -

- -> [!tip] [Github 地址](https://github.com/styled-components/styled-components) - -## 安装与使用 - -进入到工程目录并输入以下命令： - -#### **yarn** - -```bash -yarn add styled-components -``` - - - -#### **npm** - -```bash -npm install styled-components -``` - - - -下面的代码展示了这个库的基本使用场景： - -```js -import React from "react"; - -import styled from "styled-components"; - -// Create a react component that renders an <h1> which is -// centered, palevioletred and sized at 1.5em -const Title = styled.h1` - font-size: 1.5em; - text-align: center; - color: palevioletred; -`; - -// Create a <Wrapper> react component that renders a <section> with -// some padding and a papayawhip background -const Wrapper = styled.section` - padding: 4em; - background: papayawhip; -`; - -function MyUI() { - return ( - // Use them like any other React component – except they're styled! - <Wrapper> - <Title>Hello World, this is my first styled component! - - ); -} -``` - -## 约束与限制 - -### 兼容性 - -在下述版本验证通过： - -1. IDE：DevEco Studio 4.1.3.412;SDK：OpenHarmony(api11) 4.1.0.53;测试设备：Mate40 Pro(NOH-AN00);ROM：2.0.0.52(SP22C00E52R1P17log);RNOH：0.72.11 - -## 属性 - -详情见 [styled-components 源库地址](https://github.com/styled-components/styled-components) - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- | -------- | -------- | -| ThemeProvider | A helper component for theming. | component | No | / | Yes | -| css | The css prop is a convenient way to iterate on your components without settling on fixed component boundaries yet | prop | No | / | Yes | -| toStyleSheet | convert a style object to a stylesheet object | function | No | / | Yes | -| ThemeContext | access the theme object and pass the theme object to the style component | jsx component | No | / | Yes | -| isStyledComponent | A utility to help identify styled components. | function | No | / | Yes | -| withTheme | This is a higher order component factory to get the current theme from a ThemeProvider and pass it to your component as a theme prop. | function | No | / | Yes | -| useTheme | This is a custom hook to get the current theme from a ThemeProvider. | function | No | / | Yes | -| ThemeConsumer | It passes the current theme (based on a ThemeProvider higher in your component tree) as an argument to the child function. From this function, you may return further JSX or nothing. | jsx component | No | / | Yes | -| createGlobalstyle | A helper function to generate a special StyledComponent that handles global styles | function | No | Web | No | -| keyframes | A helper method to create keyframes for animations. | function | No | Web | No | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/styled-components/styled-components/blob/main/LICENSE) ，请自由地享受和参与开源。 diff --git a/1224/styled-system.md b/1224/styled-system.md deleted file mode 100644 index a1bec357..00000000 --- a/1224/styled-system.md +++ /dev/null @@ -1,217 +0,0 @@ -> 模板版本：v0.1.2 - -

-

styled-system

-

-

- - License - -

- -> [!tip] [Github 地址](https://github.com/styled-system/styled-system) - -## 安装与使用 - -进入到工程目录并输入以下命令： - -#### **yarn** - -```bash -yarn add styled-system -``` - - - -#### **npm** - -```bash -npm i styled-system -``` - - - -下面的代码展示了这个库的基本使用场景： - -```js -import styled from 'styled-components' -import { space, layout, typography, color } from 'styled-system' - -// Add styled-system functions to your component -const Box = styled.div` - ${space} - ${layout} - ${typography} - ${color} -` -// width: 50% - - -// font-size: 20px (theme.fontSizes[4]) - - -// margin: 16px (theme.space[2]) - - -// padding: 32px (theme.space[3]) - - -// color - - -// color: #333 (theme.colors.gray[0]) - - -// background color - -``` - -## 约束与限制 - -### 兼容性 - -在下述版本验证通过： - -1. IDE：DevEco Studio 4.1.3.412;SDK：OpenHarmony(api11) 4.1.0.53;测试设备：Mate40 Pro(NOH-AN00);ROM：2.0.0.52(SP22C00E52R1P17log);RNOH：0.72.11 - -## 属性 - -详情见 [styled-system 源库地址](https://github.com/styled-system/styled-system) - -**API space** - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------- | ---------- | ---- | -------- | -------- | -------- | -| margin | 外边距 | prop | No | / | Yes | -| marginTop | 上外边距 | prop | No | / | Yes | -| marginRight | 右外边距 | prop | No | / | Yes | -| marginLeft | 左外边距 | prop | No | / | Yes | -| marginX | X 轴外边距 | prop | No | / | Yes | -| marginY | Y 轴外边距 | prop | No | / | Yes | -| padding | 内边距 | prop | No | / | Yes | -| paddingTop | 上内边距 | prop | No | / | Yes | -| paddingRight | 右内边距 | prop | No | / | Yes | -| paddingLeft | 左内边距 | prop | No | / | Yes | -| paddingBottom | 下内边距 | prop | No | / | Yes | -| paddingX | X 轴内边距 | prop | No | / | Yes | -| paddingY | Y 轴内边距 | prop | No | / | Yes | - -**API color** - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----- | ------ | ---- | -------- | -------- | -------- | -| color | 颜色 | prop | No | / | Yes | -| bg | 背景色 | prop | No | / | Yes | - -**API typography** - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------- | -------- | ---- | -------- | -------- | -------- | -| fontFamily | 字体系列 | prop | No | / | Yes | -| fontSize | 字号大小 | prop | No | / | Yes | -| fontWeight | 字体权重 | prop | No | / | Yes | -| lineHeight | 行高 | prop | No | / | Yes | -| letterSpacing | 字符间距 | prop | No | / | Yes | -| textAlign | 文本对齐 | prop | No | / | Yes | -| fontStyle | 字体样式 | prop | No | / | Yes | - -**API layout** - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注 | -| ------------- | -------- | ---- | -------- | -------- | -------- | ---------------------------------------- | -| width | 宽度 | prop | No | / | Yes | -| height | 高度 | prop | No | / | Yes | -| display | 显示类型 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| minWidth | 最小宽度 | prop | No | / | Yes | -| minHeight | 最小高度 | prop | No | / | Yes | -| maxHeight | 最大高度 | prop | No | / | Yes | -| size | 大小 | prop | No | / | Yes | -| verticalAlign | 垂直对齐 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| overflow | 溢出 | prop | No | / | Yes | -| overflowX | X 轴溢出 | prop | No | / | Yes | -| overflowY | Y 轴溢出 | prop | No | / | Yes | - -**API flexbox** - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注 | -| -------------- | --------------------- | ---- | -------- | -------- | -------- | ---------------------------------------- | -| alignItems | 列内轴对齐项 | prop | No | / | Yes | | -| alignContent | 列内轴对齐内容 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| justifyItems | 行内轴对齐项 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| justifyContent | 行内轴对齐内容 | prop | No | / | Yes | -| flexWrap | 换行 | prop | No | / | Yes | -| flexDirection | 弹性方向 | prop | No | / | Yes | -| flex | 弹性布局 | prop | No | / | Yes | -| flexGrow | 分配剩余空间比例 | prop | No | / | Yes | -| flexShrink | 弹性收缩 | prop | No | / | Yes | -| flexBasis | 弹性初始长度 | prop | No | / | Yes | -| justifySelf | 行内对齐 | prop | No | / | Yes | -| alignSelf | 对齐，覆盖 alignItems | prop | No | / | Yes | -| order | 弹性布局顺序 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | - -**API border** - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注 | -| ----------------------- | ------------ | ---- | -------- | -------- | -------- | ---------------------------------------- | -| border | 边框 | prop | No | / | Yes | -| borderWidth | 边框宽度 | prop | No | / | Yes | -| borderStyle | 边框样式 | prop | No | / | Yes | -| borderColor | 边框颜色 | prop | No | / | Yes | -| borderRadius | 边框圆角 | prop | No | / | Yes | -| borderTop | 上边框 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderTopWidth | 上边框宽度 | prop | No | / | Yes | -| borderTopStyle | 上边框样式 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderTopColor | 上边框颜色 | prop | No | / | Yes | -| borderTopLeftRadius | 上左边框圆角 | prop | No | / | Yes | -| borderTopRightRadius | 上右边框圆角 | prop | No | / | Yes | -| borderRight | 右边框 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderRightWidth | 右边框宽度 | prop | No | / | Yes | -| borderRightStyle | 右边框样式 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderRightColor | 右边框颜色 | prop | No | / | Yes | -| borderBottom | 下边框 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderBottomWidth | 下边框宽度 | prop | No | / | Yes | -| borderBottomStyle | 下边框样式 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderBottomColor | 下边框颜色 | prop | No | / | Yes | -| borderBottomLeftRadius | 左下边框圆角 | prop | No | / | Yes | -| borderBottomRightRadius | 右下边框圆角 | prop | No | / | Yes | -| borderLeft | 左边框 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderLeftWidth | 左边框宽度 | prop | No | / | Yes | -| borderLeftStyle | 左边框样式 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderLeftColor | 左边框颜色 | prop | No | / | Yes | -| borderX | X 轴边框 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderY | Y 轴边框 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | - -**API position** - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注 | -| -------- | ------------ | ---- | -------- | -------- | -------- | ---------------------------------------- | -| position | 定位 | prop | No | / | Yes | -| zIndex | 元素堆叠顺序 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| top | 上偏移量 | prop | No | / | Yes | -| right | 右偏移量 | prop | No | / | Yes | -| bottom | 下偏移量 | prop | No | / | Yes | -| left | 左偏移量 | prop | No | / | Yes | - -**API shadow** - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注 | -| ---------- | -------- | ---- | -------- | -------- | -------- | ---------------------------------------- | -| textShadow | 文本阴影 | prop | No | / | Yes | -| boxShadow | 盒子阴影 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | - -**API background** - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注 | -| ------------------ | ---------- | ---- | -------- | -------- | -------- | ---------------------------------------- | -| backgroundImage | 背景图片 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| backgroundSize | 背景尺寸 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| backgroundPosition | 背景定位 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| backgroundRepeat | 背景图平铺 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/styled-system/styled-system/blob/master/LICENSE.md) ，请自由地享受和参与开源。 -- Gitee