init commit
This commit is contained in:
54
remotion/node_modules/@remotion/studio/dist/components/Checkbox.js
generated
vendored
Normal file
54
remotion/node_modules/@remotion/studio/dist/components/Checkbox.js
generated
vendored
Normal file
@@ -0,0 +1,54 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.Checkbox = void 0;
|
||||
const jsx_runtime_1 = require("react/jsx-runtime");
|
||||
const react_1 = require("react");
|
||||
const colors_1 = require("../helpers/colors");
|
||||
const Checkmark_1 = require("../icons/Checkmark");
|
||||
const size = 20;
|
||||
const background = {
|
||||
height: size,
|
||||
width: size,
|
||||
position: 'relative',
|
||||
};
|
||||
const bullet = {
|
||||
width: 10,
|
||||
height: 10,
|
||||
backgroundColor: colors_1.LIGHT_TEXT,
|
||||
borderRadius: '50%',
|
||||
};
|
||||
const box = {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
height: size,
|
||||
width: size,
|
||||
top: 0,
|
||||
left: 0,
|
||||
pointerEvents: 'none',
|
||||
color: 'white',
|
||||
};
|
||||
const Checkbox = ({ checked, onChange, disabled, name, rounded }) => {
|
||||
const ref = (0, react_1.useRef)(null);
|
||||
const input = (0, react_1.useMemo)(() => {
|
||||
return {
|
||||
appearance: 'none',
|
||||
background: disabled ? 'transparent' : colors_1.INPUT_BACKGROUND,
|
||||
border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
|
||||
height: size,
|
||||
width: size,
|
||||
top: 0,
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
margin: 0,
|
||||
};
|
||||
}, [disabled]);
|
||||
(0, react_1.useEffect)(() => {
|
||||
if (ref.current) {
|
||||
ref.current.style.setProperty('border-radius', rounded ? '50%' : '0%', 'important');
|
||||
}
|
||||
}, [rounded]);
|
||||
return ((0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), (0, jsx_runtime_1.jsx)("div", { style: box, children: checked ? rounded ? (0, jsx_runtime_1.jsx)("div", { style: bullet }) : (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null })] }));
|
||||
};
|
||||
exports.Checkbox = Checkbox;
|
||||
Reference in New Issue
Block a user