forked from Gitlink/forgeplus-react
随机生成色值
This commit is contained in:
parent
18d6716af1
commit
c5b465989c
|
|
@ -6,7 +6,7 @@ import axios from 'axios';
|
|||
function AddTagsBox({onSuccess , form ,owner , projectsId,onCancel}){
|
||||
const { getFieldDecorator , getFieldsValue , validateFields } = form;
|
||||
const [ colors , setColors ] = useState(undefined);
|
||||
const [ defaultColor , setDefaultColor ]= useState("#F17013");
|
||||
// const [ defaultColor , setDefaultColor ]= useState("#F17013");
|
||||
|
||||
function saveFunc(){
|
||||
validateFields((error,values)=>{
|
||||
|
|
@ -14,7 +14,7 @@ function AddTagsBox({onSuccess , form ,owner , projectsId,onCancel}){
|
|||
const { desc , name } = getFieldsValue();
|
||||
const url = `/v1/${owner}/${projectsId}/issue_tags`;
|
||||
axios.post(url,{
|
||||
name,description:desc,color:colors || defaultColor
|
||||
name,description:desc,color:colors
|
||||
}).then(result=>{
|
||||
result && onSuccess();
|
||||
}).catch(error=>{})
|
||||
|
|
@ -42,7 +42,7 @@ function AddTagsBox({onSuccess , form ,owner , projectsId,onCancel}){
|
|||
})(<Input placeholder="标记名称15字以内" maxLength={15}/>)}
|
||||
</Form.Item>
|
||||
<Form.Item style={{marginTop:"7px"}}>
|
||||
<ColorCard getColor={getColor} defaultColor={defaultColor}/>
|
||||
<ColorCard getColor={getColor}/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<Form.Item colon={false}>
|
||||
|
|
@ -51,7 +51,7 @@ function AddTagsBox({onSuccess , form ,owner , projectsId,onCancel}){
|
|||
})(<Input placeholder="描述30字以内" maxLength={30}/>)}
|
||||
</Form.Item>
|
||||
<div style={{textAlign:'center'}}>
|
||||
<Button style={{width:"80px"}} onClick={onCancel}>取消</Button>
|
||||
<Button style={{width:"80px"}} className="cancelTags" onClick={onCancel}>取消</Button>
|
||||
<Button style={{width:"80px"}} className="ml20" type="primary" onClick={saveFunc}>确认</Button>
|
||||
</div>
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ function ChooseMenu({
|
|||
if (faComponent && boxComponent) {
|
||||
const isChild = faComponent.contains(target);
|
||||
const isBox = boxComponent.contains(target);
|
||||
const arr = ["removeicon","iconfont icon-guanbi font-12 color-white","iconfont icon-guanbi font-12 color-blue","icon-a-bianji12","color-blue font-15 tagManage","iconfont icon-xiangzuojiantou font-15 color-grey mr5 cursor","cover"];
|
||||
const arr = ["removeicon","iconfont icon-guanbi font-12 color-white","iconfont icon-guanbi font-12 color-blue","icon-a-bianji12","color-blue font-15 tagManage","iconfont icon-xiangzuojiantou font-15 color-grey mr5 cursor","cover","ant-btn cancelTags"];
|
||||
const pointer = arr.includes(target.className);
|
||||
if(!isChild && !isBox && !pointer){
|
||||
setVisible(false);
|
||||
|
|
|
|||
|
|
@ -3,16 +3,24 @@ import { SketchPicker } from 'react-color';
|
|||
|
||||
function ColorCard({getColor,defaultColor}){
|
||||
const [ displayColorPicker , setDisplayColorPicker ] = useState(false);
|
||||
const [ color , setColor ] = useState({r: '241',g: '112',b: '19',a: '1',});
|
||||
// const [ color , setColor ] = useState({r: '241',g: '112',b: '19',a: '1',});
|
||||
const [ textcolor , setTextColor ] = useState("#F17013");
|
||||
useEffect(()=>{
|
||||
const c = Math.random().toString(16).substr(-6);
|
||||
c && setTextColor(`#${c}`);
|
||||
getColor(`#${c}`);
|
||||
},[])
|
||||
|
||||
useEffect(()=>{
|
||||
defaultColor && setTextColor(defaultColor);
|
||||
if(defaultColor){
|
||||
setTextColor(defaultColor);
|
||||
getColor(defaultColor);
|
||||
}
|
||||
},[defaultColor])
|
||||
|
||||
// 切换色卡
|
||||
function handleChange(color){
|
||||
setColor(color.rgb);
|
||||
// setColor(color.rgb);
|
||||
setTextColor(color.hex);
|
||||
getColor(color ? color.hex : defaultColor);
|
||||
}
|
||||
|
|
@ -26,7 +34,7 @@ function ColorCard({getColor,defaultColor}){
|
|||
// 还原色卡
|
||||
function reduction(){
|
||||
setTextColor("#F17013");
|
||||
setColor({r: '241',g: '112',b: '19',a: '1',});
|
||||
// setColor({r: '241',g: '112',b: '19',a: '1',});
|
||||
}
|
||||
return(
|
||||
<div>
|
||||
|
|
@ -37,7 +45,7 @@ function ColorCard({getColor,defaultColor}){
|
|||
{displayColorPicker ? (
|
||||
<div className="popover">
|
||||
<div className="cover" onClick={()=>{setDisplayColorPicker(false)}} />
|
||||
<SketchPicker color={color} onChange={handleChange} />
|
||||
<SketchPicker color={textcolor} onChange={handleChange} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue