@chayns-components/core 5.0.0-beta.332 → 5.0.0-beta.338
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/radio-button/RadioButton.styles.js +2 -2
- package/lib/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/components/text-area/TextArea.d.ts +4 -0
- package/lib/components/text-area/TextArea.js +3 -1
- package/lib/components/text-area/TextArea.js.map +1 -1
- package/lib/components/text-area/TextArea.styles.d.ts +1 -0
- package/lib/components/text-area/TextArea.styles.js +8 -2
- package/lib/components/text-area/TextArea.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -44,8 +44,8 @@ const StyledRadioButtonPseudoCheckBox = exports.StyledRadioButtonPseudoCheckBox
|
|
|
44
44
|
height: 13px;
|
|
45
45
|
position: absolute;
|
|
46
46
|
border-radius: 100%;
|
|
47
|
-
top:
|
|
48
|
-
|
|
47
|
+
top: 50%;
|
|
48
|
+
transform: translateY(-50%);
|
|
49
49
|
cursor: pointer !important;
|
|
50
50
|
`;
|
|
51
51
|
const StyledRadioButtonCheckBoxMark = exports.StyledRadioButtonCheckBoxMark = _styledComponents.default.span`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledRadioButton","exports","styled","span","_ref","isDisabled","_ref2","StyledRadioButtonCheckBox","input","StyledRadioButtonPseudoCheckBox","div","_ref3","theme","isChecked","secondary","StyledRadioButtonCheckBoxMark","_ref4","isHovered","isSelected","css","StyledRadioButtonLabel","p","_ref5","text"],"sources":["../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledRadioButtonProps = WithTheme<{ isDisabled: boolean }>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n display: flex;\n gap: 5px;\n user-select: none;\n width: fit-content;\n align-items: center;\n position: relative;\n cursor: ${({ isDisabled }: StyledRadioButtonProps) =>\n isDisabled ? 'default !important' : 'pointer'};\n opacity: ${({ isDisabled }: StyledRadioButtonProps) => (isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n opacity: 0;\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{ isChecked: boolean }>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n background-color: ${({ theme, isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n isChecked ? theme.secondary : theme['secondary-103']};\n opacity: 0.5;\n border: 1px solid rgba(160, 160, 160, 0.3);\n width: 13px;\n height: 13px;\n position: absolute;\n border-radius: 100%;\n top:
|
|
1
|
+
{"version":3,"file":"RadioButton.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledRadioButton","exports","styled","span","_ref","isDisabled","_ref2","StyledRadioButtonCheckBox","input","StyledRadioButtonPseudoCheckBox","div","_ref3","theme","isChecked","secondary","StyledRadioButtonCheckBoxMark","_ref4","isHovered","isSelected","css","StyledRadioButtonLabel","p","_ref5","text"],"sources":["../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledRadioButtonProps = WithTheme<{ isDisabled: boolean }>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n display: flex;\n gap: 5px;\n user-select: none;\n width: fit-content;\n align-items: center;\n position: relative;\n cursor: ${({ isDisabled }: StyledRadioButtonProps) =>\n isDisabled ? 'default !important' : 'pointer'};\n opacity: ${({ isDisabled }: StyledRadioButtonProps) => (isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n opacity: 0;\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{ isChecked: boolean }>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n background-color: ${({ theme, isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n isChecked ? theme.secondary : theme['secondary-103']};\n opacity: 0.5;\n border: 1px solid rgba(160, 160, 160, 0.3);\n width: 13px;\n height: 13px;\n position: absolute;\n border-radius: 100%;\n top: 50%;\n transform: translateY(-50%);\n cursor: pointer !important;\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n isHovered: boolean;\n isSelected: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n cursor: pointer;\n background-color: transparent;\n position: absolute;\n top: 0;\n left: 2.925px;\n display: inline-block;\n transform: rotate(35deg);\n height: 9px;\n width: 5px;\n border-bottom: 2px solid white;\n border-right: 2px solid white;\n border-top: transparent;\n border-left: transparent;\n z-index: 2;\n\n ${({ isHovered, isSelected }) => {\n if (isSelected) {\n return css`\n opacity: 1;\n `;\n }\n\n if (isHovered) {\n return css`\n opacity: 0.5;\n `;\n }\n\n return css`\n opacity: 0;\n `;\n }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n`;\n"],"mappings":"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"}
|
|
@@ -4,6 +4,10 @@ export type TextAreaProps = {
|
|
|
4
4
|
* The maximum height of the text area.
|
|
5
5
|
*/
|
|
6
6
|
maxHeight?: CSSProperties['maxHeight'];
|
|
7
|
+
/**
|
|
8
|
+
* The minimum height of the text area.
|
|
9
|
+
*/
|
|
10
|
+
minHeight?: CSSProperties['minHeight'];
|
|
7
11
|
/**
|
|
8
12
|
* Function that is executed when the text area loses focus.
|
|
9
13
|
*/
|
|
@@ -14,7 +14,8 @@ const TextArea = _ref => {
|
|
|
14
14
|
value,
|
|
15
15
|
onChange,
|
|
16
16
|
onBlur,
|
|
17
|
-
maxHeight = '120px'
|
|
17
|
+
maxHeight = '120px',
|
|
18
|
+
minHeight = '41px'
|
|
18
19
|
} = _ref;
|
|
19
20
|
const [displayedValue, setDisplayedValue] = (0, _react.useState)('');
|
|
20
21
|
const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
|
|
@@ -61,6 +62,7 @@ const TextArea = _ref => {
|
|
|
61
62
|
onBlur: onBlur,
|
|
62
63
|
onChange: handleChange,
|
|
63
64
|
maxHeight: maxHeight,
|
|
65
|
+
minHeight: minHeight,
|
|
64
66
|
isOverflowing: isOverflowing,
|
|
65
67
|
rows: 1
|
|
66
68
|
}), !displayedValue && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, null, placeholder)), [displayedValue, handleChange, isOverflowing, maxHeight, onBlur, placeholder]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","names":["_react","_interopRequireWildcard","require","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","TextArea","_ref","placeholder","value","onChange","onBlur","maxHeight","displayedValue","setDisplayedValue","useState","isOverflowing","setIsOverflowing","textareaRef","useRef","adjustTextareaHeight","useCallback","current","style","height","scrollHeight","parseInt","toString","useEffect","length","handleChange","event","target","useMemo","createElement","StyledTextArea","StyledTextAreaInput","ref","rows","StyledTextAreaLabel","displayName","_default","exports"],"sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FC,\n FocusEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { StyledTextArea, StyledTextAreaInput, StyledTextAreaLabel } from './TextArea.styles';\n\nexport type TextAreaProps = {\n /**\n * The maximum height of the text area.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function that is executed when the text area loses focus.\n */\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the text of the text area changes.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /**\n * Placeholder for the text area field.\n */\n placeholder?: string | ReactElement;\n /**\n * Value if the text area should be controlled.\n */\n value?: string;\n};\n\nconst TextArea: FC<TextAreaProps> = ({\n placeholder,\n value,\n onChange,\n onBlur,\n maxHeight = '120px',\n}) => {\n const [displayedValue, setDisplayedValue] = useState('');\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n }\n }, [maxHeight]);\n\n /**\n * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (displayedValue.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, displayedValue]);\n\n /**\n * This function sets the external value\n */\n useEffect(() => {\n if (typeof value === 'string') {\n setDisplayedValue(value);\n }\n }, [value]);\n\n /**\n * This function updates the value\n */\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLTextAreaElement>) => {\n setDisplayedValue(event.target.value);\n\n if (onChange) {\n onChange(event);\n }\n },\n [onChange]
|
|
1
|
+
{"version":3,"file":"TextArea.js","names":["_react","_interopRequireWildcard","require","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","TextArea","_ref","placeholder","value","onChange","onBlur","maxHeight","minHeight","displayedValue","setDisplayedValue","useState","isOverflowing","setIsOverflowing","textareaRef","useRef","adjustTextareaHeight","useCallback","current","style","height","scrollHeight","parseInt","toString","useEffect","length","handleChange","event","target","useMemo","createElement","StyledTextArea","StyledTextAreaInput","ref","rows","StyledTextAreaLabel","displayName","_default","exports"],"sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FC,\n FocusEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { StyledTextArea, StyledTextAreaInput, StyledTextAreaLabel } from './TextArea.styles';\n\nexport type TextAreaProps = {\n /**\n * The maximum height of the text area.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * The minimum height of the text area.\n */\n minHeight?: CSSProperties['minHeight'];\n /**\n * Function that is executed when the text area loses focus.\n */\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the text of the text area changes.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /**\n * Placeholder for the text area field.\n */\n placeholder?: string | ReactElement;\n /**\n * Value if the text area should be controlled.\n */\n value?: string;\n};\n\nconst TextArea: FC<TextAreaProps> = ({\n placeholder,\n value,\n onChange,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n}) => {\n const [displayedValue, setDisplayedValue] = useState('');\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n }\n }, [maxHeight]);\n\n /**\n * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (displayedValue.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, displayedValue]);\n\n /**\n * This function sets the external value\n */\n useEffect(() => {\n if (typeof value === 'string') {\n setDisplayedValue(value);\n }\n }, [value]);\n\n /**\n * This function updates the value\n */\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLTextAreaElement>) => {\n setDisplayedValue(event.target.value);\n\n if (onChange) {\n onChange(event);\n }\n },\n [onChange],\n );\n\n return useMemo(\n () => (\n <StyledTextArea>\n <StyledTextAreaInput\n ref={textareaRef}\n value={displayedValue}\n onBlur={onBlur}\n onChange={handleChange}\n maxHeight={maxHeight}\n minHeight={minHeight}\n isOverflowing={isOverflowing}\n rows={1}\n />\n {!displayedValue && <StyledTextAreaLabel>{placeholder}</StyledTextAreaLabel>}\n </StyledTextArea>\n ),\n [displayedValue, handleChange, isOverflowing, maxHeight, onBlur, placeholder],\n );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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"}
|
|
@@ -274,6 +274,7 @@ export declare const StyledTextArea: import("styled-components").IStyledComponen
|
|
|
274
274
|
}>;
|
|
275
275
|
type StyledTextAreaInputProps = WithTheme<{
|
|
276
276
|
maxHeight: CSSProperties['maxHeight'];
|
|
277
|
+
minHeight: CSSProperties['minHeight'];
|
|
277
278
|
isOverflowing: boolean;
|
|
278
279
|
}>;
|
|
279
280
|
export declare const StyledTextAreaInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, StyledTextAreaInputProps>>;
|
|
@@ -39,6 +39,12 @@ const StyledTextAreaInput = exports.StyledTextAreaInput = _styledComponents.defa
|
|
|
39
39
|
maxHeight
|
|
40
40
|
} = _ref4;
|
|
41
41
|
return maxHeight;
|
|
42
|
+
}};
|
|
43
|
+
min-height: ${_ref5 => {
|
|
44
|
+
let {
|
|
45
|
+
minHeight
|
|
46
|
+
} = _ref5;
|
|
47
|
+
return minHeight;
|
|
42
48
|
}};
|
|
43
49
|
width: 100%;
|
|
44
50
|
padding: 8px 10px;
|
|
@@ -53,10 +59,10 @@ const StyledTextAreaInput = exports.StyledTextAreaInput = _styledComponents.defa
|
|
|
53
59
|
}
|
|
54
60
|
`;
|
|
55
61
|
const StyledTextAreaLabel = exports.StyledTextAreaLabel = _styledComponents.default.label`
|
|
56
|
-
color: rgba(${
|
|
62
|
+
color: rgba(${_ref6 => {
|
|
57
63
|
let {
|
|
58
64
|
theme
|
|
59
|
-
} =
|
|
65
|
+
} = _ref6;
|
|
60
66
|
return theme['text-rgb'];
|
|
61
67
|
}}, 0.45);
|
|
62
68
|
left: 10px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledTextArea","exports","styled","div","StyledTextAreaInput","textarea","_ref","theme","_ref2","text","_ref3","isOverflowing","_ref4","maxHeight","StyledTextAreaLabel","label","
|
|
1
|
+
{"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledTextArea","exports","styled","div","StyledTextAreaInput","textarea","_ref","theme","_ref2","text","_ref3","isOverflowing","_ref4","maxHeight","_ref5","minHeight","StyledTextAreaLabel","label","_ref6"],"sources":["../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTextArea = styled.div`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n position: relative;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n maxHeight: CSSProperties['maxHeight'];\n minHeight: CSSProperties['minHeight'];\n isOverflowing: boolean;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n background-color: ${({ theme }: StyledTextAreaInputProps) => theme['100']};\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n resize: none;\n overflow-y: ${({ isOverflowing }) => (isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ maxHeight }: StyledTextAreaInputProps) => maxHeight};\n min-height: ${({ minHeight }: StyledTextAreaInputProps) => minHeight};\n width: 100%;\n padding: 8px 10px;\n\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(160, 160, 160, 1);\n border-radius: 3px;\n }\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<unknown>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: rgba(${({ theme }: StyledTextAreaLabelProps) => theme['text-rgb']}, 0.45);\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAGhC,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAI;AACzC;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAMC,mBAAmB,GAAAH,OAAA,CAAAG,mBAAA,GAAGF,yBAAM,CAACG,QAAmC;AAC7E;AACA;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAgC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA,CAAC;AACjE;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAAMC,aAAa,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AAC/E,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,KAAA;EAAA,OAAKC,SAAS;AAAA,CAAC;AACzE,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,KAAA;EAAA,OAAKC,SAAS;AAAA,CAAC;AACzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,mBAAmB,GAAAf,OAAA,CAAAe,mBAAA,GAAGd,yBAAM,CAACe,KAAgC;AAC1E,kBAAkBC,KAAA;EAAA,IAAC;IAAEX;EAAgC,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.338",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "7804f60f208b3149aa8ccfa45ca729da9f0f84b8"
|
|
74
74
|
}
|