office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
112 lines • 5.17 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var colors_1 = require("../../utilities/color/colors");
var GridCell_1 = require("../../utilities/grid/GridCell");
var ActionButton_styles_1 = require("../Button/ActionButton/ActionButton.styles");
var Styling_1 = require("../../Styling");
var Utilities_2 = require("../../Utilities");
var getClassNames = Utilities_2.classNamesFunction();
var ColorCell = /** @class */ (function (_super) {
tslib_1.__extends(ColorCell, _super);
function ColorCell() {
return _super !== null && _super.apply(this, arguments) || this;
}
return ColorCell;
}(GridCell_1.GridCell));
var ColorPickerGridCellBase = /** @class */ (function (_super) {
tslib_1.__extends(ColorPickerGridCellBase, _super);
function ColorPickerGridCellBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
ColorPickerGridCellBase.prototype.render = function () {
var _a = this.props, item = _a.item, id = _a.id, selected = _a.selected, disabled = _a.disabled, getStyles = _a.getStyles, theme = _a.theme, circle = _a.circle;
this._classNames = getClassNames(getStyles, {
theme: theme,
disabled: disabled,
selected: selected,
circle: circle,
isWhite: this._isWhiteCell(this.props.color)
});
return (React.createElement(ColorCell, { item: item, id: id, key: item.id, disabled: disabled, role: 'gridcell', onRenderItem: this._onRenderColorOption, selected: selected, onClick: this.props.onClick, onHover: this.props.onHover, onFocus: this.props.onFocus, label: item.label, className: this._classNames.colorCell, getClassNames: this._getClassNames }));
};
/**
* Render the core of a color cell
* @returns {JSX.Element} - Element representing the core of the item
*/
ColorPickerGridCellBase.prototype._onRenderColorOption = function (colorOption) {
// Build an SVG for the cell with the given shape and color properties
return (React.createElement("svg", { className: this._classNames.svg, viewBox: '0 0 20 20', fill: colors_1.getColorFromString(colorOption.color).str }, this.props.circle ?
React.createElement("circle", { cx: '50%', cy: '50%', r: '50%' }) :
React.createElement("rect", { width: '100%', height: '100%' })));
};
/**
* Validate if the cell's color is white or not to apply whiteCell style
* @param inputColor - The color of the current cell
* @returns - Whether the cell's color is white or not.
*/
ColorPickerGridCellBase.prototype._isWhiteCell = function (inputColor) {
return inputColor.toLocaleLowerCase() === '#ffffff';
};
/**
* Method to override the getClassNames func in a button.
*/
ColorPickerGridCellBase.prototype._getClassNames = function (theme, className, variantClassName, iconClassName, menuIconClassName, disabled, checked, expanded, isSplit) {
var styles = ActionButton_styles_1.getStyles(theme);
return Styling_1.mergeStyleSets(this._classNames, {
root: [
'ms-Button',
styles.root,
variantClassName,
className,
checked && [
'is-checked',
styles.rootChecked
],
disabled && [
'is-disabled',
styles.rootDisabled
],
!disabled && !checked && {
selectors: {
':hover': styles.rootHovered,
':focus': styles.rootFocused,
':active': styles.rootPressed,
}
},
disabled && checked && [
styles.rootCheckedDisabled
],
!disabled && checked && {
selectors: {
':hover': styles.rootCheckedHovered,
':active': styles.rootCheckedPressed
}
}
],
flexContainer: [
'ms-Button-flexContainer',
styles.flexContainer
]
});
};
ColorPickerGridCellBase.defaultProps = {
circle: true,
disabled: false,
selected: false,
};
tslib_1.__decorate([
Utilities_1.autobind
], ColorPickerGridCellBase.prototype, "_onRenderColorOption", null);
tslib_1.__decorate([
Utilities_1.autobind
], ColorPickerGridCellBase.prototype, "_getClassNames", null);
ColorPickerGridCellBase = tslib_1.__decorate([
Utilities_1.customizable('ColorPickerGridCell', ['theme'])
], ColorPickerGridCellBase);
return ColorPickerGridCellBase;
}(React.Component));
exports.ColorPickerGridCellBase = ColorPickerGridCellBase;
//# sourceMappingURL=ColorPickerGridCell.base.js.map