@mingoo/amotify
Version:
UI FW for React
283 lines (282 loc) • 16.3 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GenerateClassName = exports.ReadStyleSet = void 0;
const _1 = require("./_");
const FNs = {
toConcreteBorderRadius: (br) => {
let roundness = (0, _1.getInstance)().config.roundness | 0;
if (br == '1.tone.primary') {
br = [0, 2, 3, 4, 5, 5][roundness];
}
else if (br == '2.tone.secondary') {
br = [0, 1, 2, 3, 4, 5][roundness];
}
else if (br == '3.tone.tertiary') {
br = [0, '1/3', '2/3', 1, 2, 3][roundness];
}
return br;
},
ev: (v) => _1.$.is.nullish(v),
ClassNames: (type, params) => {
var _a, _b, _c, _d, _e, _f, _g;
let CLS = [];
let { gap, display: disp, position, overflow, fontColor, fontSize, fontWeight, backgroundColor: bgc, textAlign, boxShadow, margin: mrg, marginTop: mrgT, marginRight: mrgR, marginBottom: mrgB, marginLeft: mrgL, padding: pd, paddingTop: pdT, paddingRight: pdR, paddingBottom: pdB, paddingLeft: pdL, top: T, right: R, bottom: B, left: L, border: b, borderTop: bT, borderRight: bR, borderBottom: bB, borderLeft: bL, borderWidth: bWidth,
// borderTopWidth: bTWidth,
// borderRightWidth: bRWidth,
// borderBottomWidth: bBWidth,
// borderLeftWidth: bLWidth,
borderColor: bColor,
// borderTopColor: bTColor,
// borderRightColor: bRColor,
// borderBottomColor: bBColor,
// borderLeftColor: bLColor,
borderStyle: bStyle,
// borderTopStyle: bTStyle,
// borderRightStyle: bRStyle,
// borderBottomStyle: bBStyle,
// borderLeftStyle: bLStyle,
borderRadius: br, borderTopLeftRadius: brTL, borderTopRightRadius: brTR, borderBottomLeftRadius: brBL, borderBottomRightRadius: brBR, flexSizing, flexWrap, flexType, flexChilds, flexGrid, horizontalAlign, verticalAlign, transition, gridCenter, gridCols, maxHeight, minHeight, maxWidth, minWidth, width, height, unitHeight, unitWidth, opacity } = params, others = __rest(params, ["gap", "display", "position", "overflow", "fontColor", "fontSize", "fontWeight", "backgroundColor", "textAlign", "boxShadow", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "top", "right", "bottom", "left", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "borderWidth", "borderColor", "borderStyle", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "flexSizing", "flexWrap", "flexType", "flexChilds", "flexGrid", "horizontalAlign", "verticalAlign", "transition", "gridCenter", "gridCols", "maxHeight", "minHeight", "maxWidth", "minWidth", "width", "height", "unitHeight", "unitWidth", "opacity"]);
{
FNs.ev(disp) || CLS.push('dsp' + disp);
if (overflow) {
let arr = _1.$.flatArray(overflow);
CLS.push('ovfl-x-' + arr[0]);
CLS.push('ovfl-y-' + (arr[1] || arr[0]));
}
FNs.ev(position) || (CLS.push('ps' + position));
FNs.ev(textAlign) || (CLS.push('txalg' + textAlign));
FNs.ev(fontColor) || (CLS.push('ftcl' + ((_a = String(fontColor)) === null || _a === void 0 ? void 0 : _a.replace(/\..*/, ''))));
FNs.ev(fontSize) || (CLS.push('ftsz' + ((_b = String(fontSize)) === null || _b === void 0 ? void 0 : _b.replace(/\..*/, ''))));
FNs.ev(fontWeight) || (CLS.push('ftwt' + (fontWeight === null || fontWeight === void 0 ? void 0 : fontWeight.replace(/\..*/, ''))));
FNs.ev(bgc) || CLS.push('bgc' + ((_c = String(bgc)) === null || _c === void 0 ? void 0 : _c.replace(/\..*/, '')));
FNs.ev(boxShadow) || (CLS.push('bs' + boxShadow));
let _mrgT, _mrgR, _mrgB, _mrgL;
if (_1.$.is.exist(mrg)) {
if (_1.$.is.array(mrg)) {
if (mrg.length == 2)
[_mrgT, _mrgR, _mrgB, _mrgL] = [...mrg, ...mrg];
else if (mrg.length == 4)
[_mrgT, _mrgR, _mrgB, _mrgL] = mrg;
}
else
_mrgT = _mrgR = _mrgB = _mrgL = mrg;
mrgT = mrgT !== null && mrgT !== void 0 ? mrgT : _mrgT;
mrgR = mrgR !== null && mrgR !== void 0 ? mrgR : _mrgR;
mrgB = mrgB !== null && mrgB !== void 0 ? mrgB : _mrgB;
mrgL = mrgL !== null && mrgL !== void 0 ? mrgL : _mrgL;
}
FNs.ev(mrgT) || (CLS.push('mrgt' + mrgT));
FNs.ev(mrgR) || (CLS.push('mrgr' + mrgR));
FNs.ev(mrgB) || (CLS.push('mrgb' + mrgB));
FNs.ev(mrgL) || (CLS.push('mrgl' + mrgL));
let _pdT, _pdR, _pdB, _pdL;
if (_1.$.is.exist(pd)) {
if (_1.$.is.array(pd)) {
if (pd.length == 2)
[_pdT, _pdR, _pdB, _pdL] = [...pd, ...pd];
else if (pd.length == 4)
[_pdT, _pdR, _pdB, _pdL] = pd;
}
else
_pdT = _pdR = _pdB = _pdL = pd;
pdT = pdT !== null && pdT !== void 0 ? pdT : _pdT;
pdR = pdR !== null && pdR !== void 0 ? pdR : _pdR;
pdB = pdB !== null && pdB !== void 0 ? pdB : _pdB;
pdL = pdL !== null && pdL !== void 0 ? pdL : _pdL;
}
FNs.ev(pdT) || (CLS.push('pdt' + pdT));
FNs.ev(pdR) || (CLS.push('pdr' + pdR));
FNs.ev(pdB) || (CLS.push('pdb' + pdB));
FNs.ev(pdL) || (CLS.push('pdl' + pdL));
FNs.ev(T) || (CLS.push('pstt' + T));
FNs.ev(R) || (CLS.push('pstr' + R));
FNs.ev(B) || (CLS.push('pstb' + B));
FNs.ev(L) || (CLS.push('pstl' + L));
{
{
if (_1.$.is.exist(b)) {
bT = bT !== null && bT !== void 0 ? bT : b;
bR = bR !== null && bR !== void 0 ? bR : b;
bB = bB !== null && bB !== void 0 ? bB : b;
bL = bL !== null && bL !== void 0 ? bL : b;
}
if (_1.$.is.boolean(bT))
bT = ['unset', '2.normal'][Number(bT)];
if (_1.$.is.boolean(bR))
bR = ['unset', '2.normal'][Number(bR)];
if (_1.$.is.boolean(bB))
bB = ['unset', '2.normal'][Number(bB)];
if (_1.$.is.boolean(bL))
bL = ['unset', '2.normal'][Number(bL)];
FNs.ev(bT) || (CLS.push('b_t_ss' + ((_d = String(bT)) === null || _d === void 0 ? void 0 : _d.replace(/\..*/, ''))));
FNs.ev(bR) || (CLS.push('b_r_ss' + ((_e = String(bR)) === null || _e === void 0 ? void 0 : _e.replace(/\..*/, ''))));
FNs.ev(bB) || (CLS.push('b_b_ss' + ((_f = String(bB)) === null || _f === void 0 ? void 0 : _f.replace(/\..*/, ''))));
FNs.ev(bL) || (CLS.push('b_l_ss' + ((_g = String(bL)) === null || _g === void 0 ? void 0 : _g.replace(/\..*/, ''))));
}
if (_1.$.is.exist(bWidth))
CLS.push('b_wth' + String(bWidth));
if (_1.$.is.exist(bColor))
CLS.push('b_cl' + String(bColor));
if (_1.$.is.exist(bStyle))
CLS.push('b_st' + String(bStyle));
{
let _brTL, _brTR, _brBL, _brBR;
if (_1.$.is.exist(br)) {
if (_1.$.is.array(br)) {
if (br.length == 4)
[_brTL, _brTR, _brBR, _brBL] = br;
}
else {
_brTL = _brTR = _brBL = _brBR = br;
}
brTL = brTL !== null && brTL !== void 0 ? brTL : _brTL;
brTR = brTR !== null && brTR !== void 0 ? brTR : _brTR;
brBL = brBL !== null && brBL !== void 0 ? brBL : _brBL;
brBR = brBR !== null && brBR !== void 0 ? brBR : _brBR;
}
}
FNs.ev(brTL) || (CLS.push('br_tl' + FNs.toConcreteBorderRadius(brTL)));
FNs.ev(brTR) || (CLS.push('br_tr' + FNs.toConcreteBorderRadius(brTR)));
FNs.ev(brBL) || (CLS.push('br_bl' + FNs.toConcreteBorderRadius(brBL)));
FNs.ev(brBR) || (CLS.push('br_br' + FNs.toConcreteBorderRadius(brBR)));
}
FNs.ev(opacity) || (CLS.push('op' + opacity));
if (_1.$.is.exist(gap)) {
let gapRow, gapCol;
if (_1.$.is.array(gap))
gapRow = gap[0], gapCol = gap[1];
else
gapRow = gapCol = gap;
CLS.push(...['gapRow' + gapRow, 'gapCol' + gapCol]);
}
FNs.ev(flexSizing) || (CLS.push('flsz' + flexSizing));
FNs.ev(flexWrap) || (CLS.push('flwrp' + flexWrap));
FNs.ev(flexType) || (CLS.push('fltyp' + flexType));
FNs.ev(flexChilds) || (CLS.push('flchld' + flexChilds));
FNs.ev(flexGrid) || (CLS.push('flgrid' + flexGrid));
FNs.ev(verticalAlign) || (CLS.push('flvrt' + verticalAlign));
FNs.ev(horizontalAlign) || (CLS.push('flhrz' + horizontalAlign));
FNs.ev(gridCenter) || (CLS.push('grcnt' + gridCenter));
FNs.ev(gridCols) || (CLS.push('grcol' + gridCols));
FNs.ev(height) || (CLS.push('hgt' + height));
FNs.ev(width) || (CLS.push('wdt' + width));
FNs.ev(unitHeight) || (CLS.push('unthgt' + unitHeight));
FNs.ev(unitWidth) || (CLS.push('untwdt' + unitWidth));
FNs.ev(transition) || (CLS.push('trnst' + transition));
FNs.ev(maxHeight) || (CLS.push('maxh' + maxHeight));
FNs.ev(minHeight) || (CLS.push('minh' + minHeight));
FNs.ev(maxWidth) || (CLS.push('maxw' + maxWidth));
FNs.ev(minWidth) || (CLS.push('minw' + minWidth));
}
return {
otherParams: others,
className: CLS.length ? type + CLS.join(' ' + type) : ''
};
}
};
const ReadStyleSet = (rawParams) => {
let params = Object.assign({}, rawParams);
let { gradients, ssCardBox, ssSphere, ssSquare, ssPushable, ssAbsoluteCovered, ssTextEllipsis, flexCenter, flexNewLine, isLightFont, isBoldFont, isSemiBoldFont, isRounded } = params, ReturnParams = __rest(params, ["gradients", "ssCardBox", "ssSphere", "ssSquare", "ssPushable", "ssAbsoluteCovered", "ssTextEllipsis", "flexCenter", "flexNewLine", "isLightFont", "isBoldFont", "isSemiBoldFont", "isRounded"]);
if (gradients) {
let { deg, colors } = gradients;
ReturnParams = Object.assign(Object.assign({}, ReturnParams), { freeCSS: Object.assign(Object.assign({}, ReturnParams.freeCSS), { background: `linear-gradient(${deg}deg,${colors.join(',')})` }) });
}
if (ssCardBox) {
if (ssCardBox === true) {
ssCardBox = 'border';
}
let exStyles = {
backgroundColor: '1.layer.base',
borderRadius: '1.tone.primary',
boxShadow: '0.thin',
freeCSS: {
zIndex: 1
}
};
if (ssCardBox == 'border') {
exStyles.border = true;
}
else if (ssCardBox == 'layer') {
exStyles.backgroundColor = '1.layer.base';
}
else if (ssCardBox == 'cloud') {
exStyles.backgroundColor = 'cloud';
}
else if (ssCardBox == 'shadow') {
exStyles.boxShadow = '0.normal';
}
if (['dim', 'dark'].includes((0, _1.getInstance)().config.darkMode))
exStyles.boxShadow = '1.remark';
ReturnParams = Object.assign(Object.assign(Object.assign({}, exStyles), ReturnParams), { freeCSS: Object.assign(Object.assign({}, exStyles.freeCSS), ReturnParams.freeCSS), UnderBreakPointStyles: Object.assign(Object.assign({}, exStyles.UnderBreakPointStyles), ReturnParams.UnderBreakPointStyles) });
}
if (ssSphere) {
flexCenter = flexCenter !== null && flexCenter !== void 0 ? flexCenter : true;
ReturnParams = Object.assign({ padding: 0, unitWidth: ssSphere, unitHeight: ssSphere, borderRadius: 'sphere', flexSizing: 'none' }, ReturnParams);
}
if (ssSquare) {
flexCenter = flexCenter !== null && flexCenter !== void 0 ? flexCenter : true;
ReturnParams = Object.assign({ padding: 0, unitWidth: ssSquare, unitHeight: ssSquare, flexSizing: 'none' }, ReturnParams);
}
!ssPushable || (ReturnParams = Object.assign(Object.assign({ transition: 'middle' }, ReturnParams), { className: [
ReturnParams.className,
'ssPushable'
].join(' ') }));
!ssAbsoluteCovered || (ReturnParams = Object.assign({ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, ReturnParams));
!ssTextEllipsis || (ReturnParams = Object.assign(Object.assign({ overflow: 'hidden' }, ReturnParams), { freeCSS: Object.assign({ whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, ReturnParams.freeCSS) }));
!flexNewLine || (ReturnParams = Object.assign({ width: 1, flexSizing: 'none' }, ReturnParams));
!flexCenter || (ReturnParams = Object.assign({ display: 'flex', horizontalAlign: 'center', verticalAlign: 'center' }, ReturnParams));
!isLightFont || (ReturnParams = Object.assign(Object.assign({}, ReturnParams), { fontWeight: '1.light' }));
!isSemiBoldFont || (ReturnParams = Object.assign(Object.assign({}, ReturnParams), { fontWeight: '3.semiBold' }));
!isBoldFont || (ReturnParams = Object.assign(Object.assign({}, ReturnParams), { fontWeight: '4.bold' }));
!isRounded || (ReturnParams = Object.assign(Object.assign({}, ReturnParams), { borderRadius: 'sphere' }));
return ReturnParams;
};
exports.ReadStyleSet = ReadStyleSet;
const GenerateClassName = (rawParams) => {
let params = (0, exports.ReadStyleSet)(rawParams);
let { componentID, UnderBreakPointStyles = {}, className = '', freeCSS = {}, ssEffectsOnActive, ssLastChildLossBorder } = params, others = __rest(params, ["componentID", "UnderBreakPointStyles", "className", "freeCSS", "ssEffectsOnActive", "ssLastChildLossBorder"]);
let ClassNames = [className];
if (ssLastChildLossBorder) {
ClassNames.push('ssLastChildLossBorder_' + ssLastChildLossBorder);
}
if (ssEffectsOnActive) {
ssEffectsOnActive = _1.$.flatArray(ssEffectsOnActive);
for (let effect of ssEffectsOnActive)
ClassNames.push(...['eff_' + effect, 'eff_' + effect.split('.')[0]]);
}
{
let result = FNs.ClassNames('amotf_', others);
ClassNames.push(result.className);
others = result.otherParams;
}
if (UnderBreakPointStyles)
ClassNames.push(FNs.ClassNames('amotf_bp', UnderBreakPointStyles).className);
let states = Object.assign({}, others);
if (freeCSS)
states.style = Object.assign(Object.assign({}, freeCSS), states.style);
if (componentID || states['data-component-id']) {
states['data-component-id'] = states['data-component-id'] || componentID;
}
if (ClassNames.length) {
states.className = ClassNames.join(' ')
.trim()
.replace(/%/ig, 'P')
.replace(/\d+px/ig, 'PIX')
.replace(/\s+/ig, ' ')
.replace(/\//ig, '_')
.replace(/\./ig, '-');
}
return states;
};
exports.GenerateClassName = GenerateClassName;